在播放視頻後執行任務幾秒鐘

我試圖在視頻開始播放5秒後向視頻添加一個'onclick'事件監聽器，它應該將用戶重定向到某個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"; 
      }; 
     } 
    }

問題是，它似乎每次'timeupdate'觸發時都會執行該函數。但是，一旦視頻當前時間達到5，然後完成執行myfunc，我想將onclick處理程序分配給視頻。
任何想法，我可以做到這一點？有沒有更好的方法來達到我的目的？

來源

2017-10-15 Miss.Code

一，二circunstances了'timeupdate'觸發事件是在播放視頻時（[W3Schools的]的（HTTPS ：//www.w3schools.com/tags/av_event_timeupdate.asp））。如果您不希望每次事件觸發時執行您的函數，我建議首先將'click'事件添加到視頻元素，然後使用'currentTime'屬性。 – CrisMVP3200

@ CrisMVP3200你能給我一個示例代碼嗎？ –

@MissCode當然，下面檢查;） – CrisMVP3200

正如我在評論中提到的，而不是使用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>

來源

2017-10-19 13:52:47 CrisMVP3200

是的。這工作正常。 TNX –

在播放視頻後執行任務幾秒鐘

回答

相關問題