Question

我正在尝试添加一个＆＃39; onclick＆＃39;视频开始播放5秒后我的视频的事件监听器应该将用户重定向到某个URL。我目前的js代码：

    document.getElementById('my_video_1').addEventListener("timeupdate", myfunc, false);

    function myfunc() {
        console.log('in my func');
        if (this.currentTime > 5) {
            console.log('in if');
            this.onclick = function () {
                location.href = "www.google.com";
            };
        }
    }

问题在于，似乎每次都会执行该功能，并且时间更新＆＃39;火灾。但是我希望在视频当前时间达到5后将onclick处理程序分配给视频，然后完成执行myfunc 我有什么想法可以做到这一点？有没有更好的方法来达到我的目的？

Answer 1

正如我在评论中提到的，不是使用timeupdate事件（这意味着每次播放视频时都会执行您的功能，或者移动它的播放位置），最好只使用click事件（使用addEventListener方法或onclick属性）。

/* Attach the click event with the addEventListener() method
   By default, the third parameter, useCapture, is false */
document.getElementById("my_video_1").addEventListener("click", myfunc);

/* Attach the click event with the onclick property */ 
document.getElementById("my_video_1").onclick = myfunc;

然后，在通过click事件trigerring执行的函数中，检查视频的当前时间是否超过5秒。

function myfunc() {
    if (this.currentTime > 5) {
        location.href = "http://www.google.com";
    };
}

这是完整的示例代码（包含HTML和JavaScript）：

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8"/> 
    </head>
    <body>
        <video id="my_video_1" width="426px" height="240px" autoplay controls muted>
            <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
        </video>    
    </body>
    <script>
        document.getElementById("my_video_1").addEventListener("click", myfunc);
        // document.getElementById("my_video_1").onclick = myfunc; 

        function myfunc() {
            if (this.currentTime > 5) {
                location.href = "https://www.google.com";
            };
        }
    </script>
</html>

播放视频后的任务秒数

1 个答案: