Question

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

我想在启动视频时放一个计时器，问题是用户可以控制视频，然后停止再播放他想要的次数，这样定时器就会失效。

示例非常好！

- - - - - - - - EDIT 这是我正在使用的代码的示例：

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

以下是您的演示

修改：更新了演示。

＆＃13;

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="";}
//---------
}

＆＃13;

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

＆＃13;

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

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..
    }
}

如果您有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 2

使用HTML5播放器进行示例。

最多可发生100毫秒的差异，而不是恰好5秒。但你可以调整脚本。

您可以在此处粘贴此代码以进行尝试： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

<html>
<body>
    <video id="vid" width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
    <script>
        var callOnce = true;

        function monitorVideo() {
            if ((vid.duration - vid.currentTime) < 5)
                if (callOnce) {
                    myFunction();
                    callOnce = false;
                }
        }

        function myFunction() {
            console.log('5 seconds');
        }

        setInterval(monitorVideo, 100);
    </script>
</body>
</html>

Answer 3

告诉我们您正在使用的视频播放器。

如果是自定义的，则在部分内容上显示一个ID，说明您在视频中的距离并说出

if (document.getElementById("bla").innerhtml === whatever 5 seconds before the end of the video is)
function();

使用JavaScript

3 个答案: