悬停播放几秒钟的视频缩略图，然后显示缩略图。 - Javascript

Question

        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">

这是我写的代码。悬停时播放视频，但释放悬停时视频不会停止，悬停时视频播放并在最后一帧停止，结束后不显示缩略图。

Answer 1

您的代码在showThumbnail() 函数中没有video.pause();，这会有效地停止您的视频。您还可以在上述函数中添加video.load();，将其重置为初始状态。