如何运行自动播放视频并将声音静音?
问题描述:
如何运行自动播放视频并将猫头鹰传送带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>
谢谢你,我会很乐意帮助!
答
如果你能解决我在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来沟通。
答
调用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);
例子:
此传送带将您的视频作为** iframe **添加到html中。你需要添加**自动播放**和**静音**归因于像视频这样的人,但它的小技巧。这可能会帮助你https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors –
possile dublicate http://*.com/questions/22678720/owl-carousel-wont-autoplay –
$('。owl-video- ())。click()这也可以帮助你 –