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

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

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

1 个答案: