Html5 video not playing on bxslider
Question
Currently i have a bxSlider, which has a video on the second slide. I've got the video working inside of the slider fine with the video tag. But what I'm trying to do is get the video to play once the slide is active and current.
This is my current on slide after.
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);
}
Ignore my console log, I was just seeing if the .play did anything. It doesn't. Yet the video doesn't seem to play once the slide shows. If i set the video to auto play it will work, but this just doesn't seem to work.
If I run:
document.getElementById("video").play();
I get the following: (which i don't fully understand).
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Thanks
2 answers
solution1
2 ACCPTED 2016-06-02 00:05:32
You simply use the callback onSlideBefore() . More details in the source in the comments.
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>
solution2
1 2016-10-12 18:24:22
If you're trying to get the 1st slide in the show to play you can do that using onSliderLoad() - and using a wrapper method to get both to work.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.