javascript - 使用JavaScript在视频播放结束前几秒钟运行一个函数

Question

我正在播放一个视频。在视频播放结束前5秒钟如何调用函数？

我以为在开始播放视频时会设置一个计时器，问题是用户可以控制该视频，然后停止并再次播放他想要的次数，因此该计时器无效。

例子会很好!

- - -编辑 - - -
这是我正在使用的代码的示例:

video = document.createElement("video");
    video.setAttribute("id", id);
    video.src = url;
    video.onended = function(e) {
        var playlistName = getPlaylistName();
        findNextSongToPlay(playlistName, playNextSong);
    };

我希望“onended”事件不是在最后调用，而是在5秒钟之前调用。
因此，我需要对其进行一些更改。

再次，非常感谢!

Answer 1

这是给你的演示

Edit: Updated Demo.

window.onload=function(){
video = document.createElement("video");
    video.setAttribute("id", "Myvideo");
    video.setAttribute("controls", "controls");
    video.src = "http://www.w3schools.com/html/mov_bbb.mp4"; 
    video.addEventListener("timeupdate", myfunc,false);
    document.body.appendChild(video);  
}

function myfunc(){
	if(this.currentTime > this.duration-5){
		//Less than 5 seconds to go. Do something here.

//---- For Demo display purposes
document.getElementById('Example').innerHTML="Less than 5 seconds to go!";
//---------
	} //End Of If condition.
//---- For Demo display purposes
else{document.getElementById('Example').innerHTML="";}
//---------
}

<div id="Example"></div>

由于播放器是动态创建的，因此您可以使用:

video = document.createElement("video");
video.setAttribute("id", id);
video.src = url;
  //Add the event Listener
  video.addEventListener("timeupdate", myfunc,false);
  video.onended = function(e) {
    var playlistName = getPlaylistName();
    findNextSongToPlay(playlistName, playNextSong);
  };

那应该调用这个函数

function myfunc(){
    if(this.currentTime > this.duration-5){
        //Do something here..
    }
}

如果您有任何疑问，请在下面发表评论，我们会尽快与您联系。

我希望这有帮助。祝您编码愉快!