使用JavaScript在視頻結束前幾秒鐘運行一個函數

我有一個正在播放的視頻。如何在視頻結束前5秒調用某個功能？使用JavaScript在視頻結束前幾秒鐘運行一個函數

我以爲在啓動視頻時放了一個定時器，問題是用戶可以控制視頻，並停止它並再次播放他想要的次數，所以定時器變得無效。

例子會非常好！

----- -----編輯這是一個例子，我使用的是代碼：

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

我想不會在最終定名爲「onended」事件，但前5秒.. 所以我需要改變它一點點..

再次，非常感謝！

來源

2015-09-25 Fair Play

您使用的是哪個視頻播放器？ JW，瀏覽器內置等？ –

您可以顯示視頻播放器的源代碼嗎？ '我有一個正在播放的視頻'不指定播放器是你自己的，插件還是YouTube視頻...請給出關於這個「視頻播放器」的更多信息 – NewToJS

這裏是你

編輯演示：更新演示。

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(){ 
 
\t if(this.currentTime > this.duration-5){ 
 
\t \t //Less than 5 seconds to go. Do something here. 
 

 
//---- For Demo display purposes 
 
document.getElementById('Example').innerHTML="Less than 5 seconds to go!"; 
 
//--------- 
 
\t } //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.. 
    } 
}

如果您有任何q有問題請在下面留言，我會盡快回復您。

我希望這會有所幫助。快樂的編碼！

來源

2015-09-26 00:05:26 NewToJS

非常感謝！一個非常有用的答案！我希望我能夠對你高興......我保證，當我可以，我會回到這個問題，並做到這一點！ TNX！ –

你非常歡迎。我已經更新了第一個演示，以適合您現有的源代碼作爲更好的示例。樂於幫助！：D快樂編碼！ – NewToJS

-1

告訴我們您正在使用的視頻播放器。

如果是定製穿上一部分說多遠的視頻，你是一個id，說

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

來源

2015-09-25 23:39:53 ZAZLEO

我看不到這是非常很有幫助。 – NewToJS

樣品與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>

來源

2015-09-25 23:42:59

爲什麼不將事件監聽器附加到播放器而不是設置間隔？聆聽'playing'事件觸發if條件？ – NewToJS

我認爲OP沒有提供足夠的信息來發布超過基本示例的內容。 – Shikkediel

我編輯了我的答案。這有幫助嗎？ @Shikkediel - 你能爲你的意思寫一個例子嗎？ –

使用JavaScript在視頻結束前幾秒鐘運行一個函數

回答

相關問題