2017-10-15 6 views
0


ビデオの再生が開始され、ユーザーを特定のURLにリダイレクトする必要がある5秒後に、ビデオに「onclick」イベントリスナーを追加しようとしています。現在のjsコード:ビデオが再生されてから数秒後にタスクを実行する

問題は、「timeupdate」が発生するたびに関数が実行されているようです。しかし、ビデオの現在時刻が5に達したら、onclickハンドラをビデオに割り当ててから、myfuncの実行を終了します。
どうすればいいですか? 私の目的に役立つ方法はありますか?

+0

一つは、 ://www.w3schools.com/tags/av_event_timeupdate.asp))。イベントが発生するたびに関数が実行されないようにするには、最初に 'click'イベントをvideo要素に追加し、' currentTime'プロパティを使用することを提案します。 – CrisMVP3200

+0

@ CrisMVP3200私はサンプルコードplsを教えてください。 –

+0

@MissCode確かに、以下をチェック;) – CrisMVP3200

答えて

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の両方が含まれています)です:ビデオがhttps([W3Schoolsの](再生しているとき `timeupdate`イベントが発生した2 circunstancesの

<!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> 
+0

はい。これは正常に動作します。 Tnx –

関連する問題