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

Question

如何运行自动播放视频并将猫头鹰传送带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', ''); 
       } 
      } 
     }); 
}); 

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

我使用的postMessage与iFrame来沟通。

Answer 2

调用jQuery的功能发挥（）回调afterAction：

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

甚至这样的：

(function($) { 
    $(document).ready(function() { 
     setTimeout(
      function() { 
       $(".active .owl-video-play-icon").trigger("click"); 
      }, 1000); 
    }); 
    $(document).on('click', '.owl-dot', function() { 
     if ($('.owl-item.active').hasClass('owl-video-playing')) {} else { 
      setTimeout(
       function() { 
        $(".active .owl-video-play-icon").trigger("click"); 
       }, 1000); 
     } 
    }); 
})(jQuery); 

例子：

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