目前我有一个 bxSlider，第二张幻灯片上有一个视频。我已经让 slider 内的视频与视频标签一起正常工作。但我想做的是在幻灯片处于事件状态并处于当前状态后播放视频。
这是我当前的幻灯片。
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}
谢谢
最佳答案
您只需使用回调 onSlideBefore() 。更多详细信息请参阅评论中的来源。
片段
<!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>关于javascript - Html5 视频无法在 bxslider 上播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37576316/