Question

我正在尝试让我的缩略图视频以chrome和FF自动播放，并在过渡时带有音频。如果我设置autoplay = 1和Mutant = 1，则它在Chrome中可以正常运行，但是，当我将Mutute = 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&amp;controls=0&amp;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>

自动播放功能无法在Chrome中运行-YouTube嵌入

0 个答案: