Question

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

$('.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

在回调后调用jQuery函数play（）：

https://crl.microsoft.com

甚至这个：

afterAction: function(current) {
        current.find('video').get(0).play();
    }

示例：

http://codepen.io/vishpatel93/pen/gmqzQv

Answer 2

如果你可以解决我在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', '');
              }
          }
      });
});

这是更新的小提琴：https://jsfiddle.net/05t1ryje/

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

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

2 个答案: