function playVideo() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'none';
var starttime = 7; // start at 7 seconds
var endtime = 10; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}
function showThumbnail() {
var thumbImg = document.querySelector('img');
thumbImg.style.display = 'inherit';
}
<video id="yourVideoId" width="240" height="320" onmouseover="playVideo()" onmouseout="showThumbnail()">
<source src="assets/video/sample.mp4" type="video/mp4">
</video>
<img src="assets/images/banner.png" width="240" height="320">
这是我写的代码。悬停时播放视频,但释放悬停时视频不会停止,悬停时视频播放并停止在最后一帧并且结束后不显示缩略图。
最佳答案
您的代码在 showThumbnail()
函数中没有包含 video.pause();
,这会有效地停止您的视频。您还可以在上述函数中添加 video.load();
以将其重置为初始状态。
关于javascript - 悬停播放视频缩略图几秒钟,然后显示缩略图。 - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48476226/