我有一个 HTML5 视频,其中有一张海报和一个 CSS 播放叠加按钮。我试图在视频结束后加载视频,以便再次显示海报和播放叠加按钮。
我尝试了以下代码,但在最后一行出现解析器错误,任何人都可以帮助我并让我知道我做错了什么!?
$(document).ready(function() {
$('.video').parent().click(function () {
if ($(this).children(".video").get(0).paused) {
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
} else {
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
var video= $(".video").get(0);
video.addEventListener('ended',function () {
video.load();
$(".playpause").show();
}, false);
});
最佳答案
防止
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
错误,将 if
语句包装在 setTimeout()
调用中的 click
处理程序中。
另请参阅How to prevent "The play() request was interrupted by a call to pause()" error?
$(document).ready(function() {
$('.video').parent().click(function () {
var vid = $(this).children(".video").get(0);
setTimeout(function() {
if (vid.paused) {
vid.play();
$(this).children(".playpause").fadeOut();
} else {
vid.pause();
$(this).children(".playpause").fadeIn();
}
})
});
var video= $(".video").get(0);
video.addEventListener('ended',function () {
video.load();
$(".playpause").show();
}, false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
click<br>
<span class="playpause">play pause</span>
<video controls class="video" poster="https://placehold.it/350x150" src="https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4"></video>
</div>
关于JavaScript 解析器错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41108925/