单击缩略图时播放视频

Play video when thumbnail is clicked

本文关键字：播放 视频 略图 单击      更新时间：2023-09-26

我是JavaScript的初学者。我想在HTML5中播放一个特定时间的mp4文件。首先，我想加载一个缩略图。如果点击它，我想播放特定时间的视频文件。这是我的密码。但它不起作用。我做错了什么？

function PlayVideo(aid, vid) {
    var video = document.getElementById(vid);
    video.addEventListener('loadedmetadata', function () {
        videoStartTime = 6;
        videoEndTime = 7;
        this.currentTime = videoStartTime;
    }, false);
    video.addEventListener('timeupdate', function() {
        if (this.currentTime > videoEndTime) {
            this.pause();
            this.currentTime = 6;
        }
    });
    document.getElementById(aid).style.display = "none";
}

在HTML文件的正文中：

<a id = "anchor" onclick = "PlayVideo('anchor','vid');">
    <img src = "test.jpg" alt = "trail" />
</a>
<video id = "vid" controls width = "320">
  <source src = "test.mp4" type = "video/mp4"/>
</video>

我看不到你在任何地方开始视频：

function PlayVideo(aid, vid) {
    var video = document.getElementById(vid);
    video.play();  // <- start play
    //...
}

您还可以收听全局中的canplay事件，以了解何时可以启动视频。

相关文章：