ビデオの再生が開始され、ユーザーを特定のURLにリダイレクトする必要がある5秒後に、ビデオに「onclick」イベントリスナーを追加しようとしています。現在のjsコード:ビデオが再生されてから数秒後にタスクを実行する
問題は、「timeupdate」が発生するたびに関数が実行されているようです。しかし、ビデオの現在時刻が5に達したら、onclickハンドラをビデオに割り当ててから、myfuncの実行を終了します。
どうすればいいですか? 私の目的に役立つ方法はありますか?
ビデオの再生が開始され、ユーザーを特定のURLにリダイレクトする必要がある5秒後に、ビデオに「onclick」イベントリスナーを追加しようとしています。現在のjsコード:ビデオが再生されてから数秒後にタスクを実行する
問題は、「timeupdate」が発生するたびに関数が実行されているようです。しかし、ビデオの現在時刻が5に達したら、onclickハンドラをビデオに割り当ててから、myfuncの実行を終了します。
どうすればいいですか? 私の目的に役立つ方法はありますか?
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>
はい。これは正常に動作します。 Tnx –
一つは、 ://www.w3schools.com/tags/av_event_timeupdate.asp))。イベントが発生するたびに関数が実行されないようにするには、最初に 'click'イベントをvideo要素に追加し、' currentTime'プロパティを使用することを提案します。 – CrisMVP3200
@ CrisMVP3200私はサンプルコードplsを教えてください。 –
@MissCode確かに、以下をチェック;) – CrisMVP3200