HTML5视频无法在bxslider上播放
[英]Html5 video not playing on bxslider
问题描述
目前我有一个bxSlider，第二张幻灯片上有一个视频。 我已经将视频在滑块内部与video标签一起使用了。 但是我想做的就是在幻灯片处于活动状态且当前处于活动状态时让视频播放。
这是我目前的幻灯片。
onSlideAfter: function(currentSlide, totalSlides, currentSlideHtmlObject){
$j(currentSlide).addClass('active-slide');
if(currentSlideHtmlObject == 1){
var video = document.getElementById("video");
console.log(video.play());
} else if(currentSlideHtmlObject == 2 || currentSlideHtmlObject == 0) {
$j('video')[0].currentTime = 0;
}
modifyDelay(currentSlideHtmlObject);
}
忽略控制台日志，我只是在看.play是否有任何作用。 没有。 但是，幻灯片放映后，该视频似乎无法播放。 如果我将视频设置为自动播放，它将可以使用，但这似乎不起作用。
如果我运行：
document.getElementById("video").play();
我得到以下信息：（我不完全了解）。
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
谢谢
2 个解决方案
解决方案1
2 已采纳 2016-06-02 00:05:32
您只需使用回调onSlideBefore() 。 注释中来源中有更多详细信息。
SNIPPET
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multi BxSlider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.css" /> <style> /* This centers the img and video */ img, video { display: block; margin: 0 auto; } </style> </head> <body> <ul class="bx"> <li data-idx="0"> <img src="http://dummyimage.com/640x360/000/fff.png&text=1"> </li> <li data-idx="1"> <!-- Set each video id so that it corresponds with the `data-idx` So if slide <li> is data-idx="1", then video id="vid1"--> <video id="vid1" class="vid" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video> </li> <li data-idx="2"> <img src="http://dummyimage.com/640x360/000/fc0.png&text=3"> </li> <li data-idx="3"> <img src="http://dummyimage.com/640x360/000/0ff.png&text=4"> </li> <li data-idx="4"> <img src="http://dummyimage.com/640x360/000/b52.png&text=5"> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.js"></script> <script> var bx = $(".bx").bxSlider({ pager: false, nextText: '', prevText: '', infiniteLoop: false, /* This callback will fire a function before a slide completes it's course to it's destination */ onSlideBefore: autoPlay }); /* This function just uses the `to` parameter I put all of them there because bxSlider expects them there, I have bad luck if I don't... don't ask:P */ function autoPlay($ele, from, to) { /* idx is the slide index number if there is a video within the slide then play it. */ var idx = parseInt(to, 10); var vid = document.querySelector('#vid' + idx); if (vid) { vid.play(); } } </script> </body> </html>
解决方案2
1 2016-10-12 18:24:22
如果您想让放映中的第一张幻灯片播放，可以使用onSliderLoad（）-并使用包装器方法使两者同时工作。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
video: true,
onSliderLoad: autoPlay,
onSlideBefore: autoPlayWrapper
});
});
// Calls the autoPlay function with the index of the next slide
function autoPlayWrapper(asdf,asdf,index){
autoPlay(index);
}
// play the video in the slide at index
function autoPlay(index){
var idx = parseInt(index,10);
var vid = document.querySelector("#vid"+idx);
if(vid){
vid.play();
}
}
</script>
HTML5背景视频无法播放
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.