youtube - 自动播放在 Chrome 中不起作用 - Youtube 嵌入
问题描述
我正在尝试让我的缩略图视频在 chrome 和 FF 中自动播放,并在翻转时播放音频。如果我设置 autoplay=1 和 mute=1 它在 Chrome 中工作正常,但是一旦我更改 mute=2 或 0,视频将不再在 Chrome 中悬停时自动播放。视频在 FF 中自动播放音频,自动播放 = 1 和静音 = 2,但鼠标关闭后,音频继续播放,视频停止。代码如下。如果可以的话,建议我可能做错了什么。网站是 bad-adzvideos.com 谢谢!
<!-- video banner -->
<script type="text/javascript">
var ltbox=$('#mylightbox');
lnk=null;
(function(){
// Custom script to load the fallback image of a video in the background while loading
var startObserver = function(sqsVideoEl){
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver || window.MozMutationObserver;
if (!MutationObserver){
return;
}
var getPlayerElement = function () {
// the element changes from div to iframe during runtime, id is the same though.
return sqsVideoEl.querySelector('#player');
}
var fallbackImageElement = sqsVideoEl.querySelector('.custom-fallback-image');
var isVideoReady = function(){
return sqsVideoEl.querySelector('#player.ready');
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (isVideoReady()) {
observer.disconnect();
getPlayerElement().style.opacity = 1.0;
fallbackImageElement.style.display = "none";
}
});
});
var isIframeLoaded = function (){
if (!sqsVideoEl.querySelector('iframe#player')) {
setTimeout(isIframeLoaded, 150)
} else {
observer.observe(getPlayerElement(), { attributes : true });
}
}
if(!isVideoReady()){
getPlayerElement().style.opacity = 0.0;
fallbackImageElement.style.opacity = 1.0;
fallbackImageElement.style.display = "block";
isIframeLoaded();
}
}
var init = function(){
// As there can be multiple background video's on a single page we do this for all of them in a loop.
var items = document.getElementsByClassName('sqs-video-background');
var items_len = items.length;
for (var i = 0; i < items_len; i++) {
var el = items[i];
startObserver(el);
}
}
$(document).ready(function () {
$( ".summary-thumbnail-container" )
.mouseover(function() {
var frmsrc=null;
var page="https://bad-adzvideos.squarespace.com"+$( this ).attr("href");
console.log(page);
var yy=$( this ).attr("href").split("/");
var ttl=yy[yy.length-1].replace(/\-/g, ' ').toUpperCase();
// $('#ifr').html('<iframe id="tstpgs" src='+page+'></iframe>');
/*$( "#tstpgs" ).load(function() {
frmsrc= $( "#tstpgs" ).contents().find(".sqs-video-opaque").html();
});*/
//var frmsrc= $( "#tstpg" ).contents().find("iframe").attr("src");
$('#mylightbox').html('<iframe name="abcd" frameBorder="0" scrolling="no" height="225" width="400" id="tstpg" src='+page+'></iframe>');
// $.featherlight($('#mylightbox'), {});
if ($('#mylightbox').hasClass('ui-dialog-content')) {
$( "#mylightbox" ).dialog( "destroy" );
}
$('#mylightbox').dialog({
backdrop: false,
keyboard: true,
height: 300,
width: 420,
draggable: true,
title: ttl
})
//console.log(frmsrc);
}).mousemove(function(e) {
var pos = e.pageX+" "+e.pageY;
if ($('#mylightbox').hasClass('ui-dialog-content')) {
$("#mylightbox").dialog( "option", "position", {
"my": "left top",
"at": "right+10 center",
"of": $(this)
});
}
}).mouseleave(function() {
if ($('#mylightbox').hasClass('ui-dialog-content')) {
$( "#mylightbox" ).dialog( "destroy" );
}
});
if($( ".sqs-video-opaque" ).length)
{
$( ".sqs-video-opaque" ).trigger( "click" );
var a=null;
var frmid=$("iframe").attr("id");
var frmsrc=$("iframe").attr("src");
var aa=frmsrc.split("?");
var url=aa[0]+"?rel=0&controls=0&showinfo=0";
//console.log(url);
lnk=url+"&autoplay=1&mute=1";
$('#'+frmid).attr('src', url)
$('#'+frmid).hover(function(){
if(a==null)
{
$('#'+frmid).attr('src', url+"&autoplay=1&mute=1")
a="abc";
}
});
}
console.log(window.name);
if(lnk!=null)
{
if(window.name=="abcd")
{
location.href=lnk;
}
//$('#tstpg').attr('src', lnk);
}
});
try{
init();
}catch(err){
if (console && console.error){
console.error('Error while trying to load fallback images by default (manual code injection script in Settings > Advanced):', err);
}
}
})()
</script>
解决方案
推荐阅读
- java - 如何根据休眠中的创建日期检索最后创建的记录
- python - 计算圆周 360 度移动平均线
- html - div 和 div 之间有奇怪的空格
- python - 这是将多个参数发送到 concurrent.futures.ThreadPoolExecutor 的正确方法吗?
- html - CSS网格布局行高0px时为空
- rust - 如何返回 RefCell 值的参考
- python - 如何使用熊猫从列中删除整数值
- javascript - 对象作为 React 子级无效(找到:[object Promise])。当我想将状态设置为 true 时显示错误
- amazon-web-services - 适用于 AWS Secrets Manager 的 VPC 终端节点
- android - Java 代码中的 Android 11 文件读/写权限问题