javascript - 如何运行自动播放视频并静音？

Question

如何为 owl carousel 2 运行自动播放视频并静音？

我的代码 - https://jsfiddle.net/ufqp8Lku/

$('.owl-carousel').owlCarousel({
  items: 1,
  merge: true,
  loop: true,
  margin: 10,
  video: true,
  lazyLoad: true,
  center: true,
  responsive: {
    480: {
      items: 1
    },
    600: {
      items: 1
    }
  }
})

.owl-carousel,
.owl-carousel .item-video {
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" />

<div class="owl-carousel owl-theme">
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="https://vimeo.com/23924346"></a>
  </div>
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="https://www.youtube.com/watch?v=JpxsRwnRwCQ"></a>
  </div>
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="https://www.youtube.com/watch?v=FBu_jxT1PkA"></a>
  </div>
</div>

Answer 1

如果您可以解决我在 jsfiddle 中遇到的跨源问题，这将解决您的问题:

function muteCurrentYoutubeVideo(){
    var tempId =  'yt-' + +new Date();
    var activeFrame = document.querySelector(".owl-item.active iframe");
    activeFrame.setAttribute('id', tempId);
    var player;


    player = new YT.Player(tempId, {
        events: {
            'onReady': function(){ 
                player.mute();
                player.playVideo();
                activeFrame.setAttribute('id', '');
            }
        }
   });
}

function toggleOwlVideos(){
    // set required elements here.
    var currentSlide = document.querySelector(".owl-item.active");
    var playBtn = currentSlide.querySelector(".owl-video-play-icon");
    var frame = currentSlide.querySelector("iframe");
    var loading = Boolean(frame);

    // if playBtn found and carousel is not loading the vimeo frame
    if (playBtn && !loading){
       playBtn.click(); // toggle play state
    }

    if (frame){ // if vimeos frame is ready
        frame.contentWindow.postMessage('{"method":"setVolume", "value":0}', '*'); // set value to 0
        muteCurrentYoutubeVideo();
    } else {
       setTimeout(toggleOwlVideos, 300); // try again in 300ms.
    } 
}

var owl = $('.owl-carousel').owlCarousel({ /* ... */ });

owl.on('changed.owl.carousel', function(event) {
     // executed whenever owlcarousel changes.
     // the timeout(0) is required unfortunately because
     // otherwise this gets executed before the slide has
     // successfully changed.
     setTimeout(toggleOwlVideos, 0);
})

音量切换按钮:

$(".mute-toggle").on("click", function(){
      var tempId =  'yt-' + +new Date();
      var activeFrame = document.querySelector(".owl-item.active iframe");
      activeFrame.setAttribute('id', tempId);
      var player;


      player = new YT.Player(tempId, {
          events: {
              'onReady': function(){ 
                  if (player.isMuted()){
                      player.unMute();
                  } else {
                      player.mute();
                  }
                  activeFrame.setAttribute('id', '');
              }
          }
      });
});

这是更新后的 fiddle :https://jsfiddle.net/05t1ryje/

我正在使用 postMessage 与 iFrame 进行通信。