HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのontimeupdate属性でメディアの再生位置が変化したときにスクリプトを実行する方法

ontimeupdate属性は、<video>や<audio>などのメディア要素の再生位置が変化するたびに発生するイベントです。早送りや巻き戻しなどのシーク操作だけでなく、通常の再生中にも継続的に発生します。

ontimeupdate属性の基本

このイベントは、メディアのcurrentTimeプロパティ（現在の再生位置）が更新されるたびにトリガーされます。一般的には約250ミリ秒ごとに定期的に発生するため、再生位置をリアルタイムに表示したい場合などに活用できます。

主な特徴

  • 再生中、一定間隔で繰り返し発生します
  • ユーザーによるシーク操作（早送り・巻き戻し）でも発生します
  • 現在の再生位置はcurrentTimeプロパティで取得できます

実装例

以下のコードでは、動画の再生位置が変化するたびに、画面上へ現在の再生時間を表示しています。

<!DOCTYPE html>
<html>
   <body>
      <h2 id="test">Play</h2>
      <video id = "myid" width="320" height = "176" controls ontimeupdate = "myFunction()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素をサポートしていません。
      </video>
      <script>
         function myFunction() {
            document.getElementById("test").innerHTML = "Current position: " +
            document.getElementById("myid").currentTime;
         }
      </script>
   </body>
</html>

コードの解説

<video>要素にontimeupdate="myFunction()"を指定することで、再生位置が変わるたびに関数myFunction()が呼び出されます。関数内では、document.getElementById("myid").currentTimeによって現在の再生位置（秒単位）を取得し、その値を<h2>要素の内容として書き換えています。

この仕組みを応用すれば、プログレスバーの連動表示や、特定の再生時間に達したときの処理など、さまざまなインタラクティブな機能を実装できます。

  1. HTMLで要素がフォーカスを失ったときにスクリプトを実行するには？

    HTMLでは、onblur属性を使うことで、要素がフォーカスを失ったタイミングでスクリプトを実行できます。例えば、テキスト入力欄からカーソルが外れた瞬間に入力内容を加工するといった処理が簡単に実装可能です。以下のサンプルコードを実行して、onblur属性の動作を確認してみてください。コード例<!DOCTYPE html> <html>    <body>       <p>下記に入力してください！</p>       Country: <input

  2. HTMLでブラウザがメディアデータを取得中のときにスクリプトを実行するには？

    HTMLでは、onprogress属性を使用することで、ブラウザがメディアデータ（動画や音声）をダウンロードしている最中にスクリプトを実行できます。onprogress属性とはonprogress属性は、ブラウザがメディアデータを取得（バッファリング）している間に発生するイベントです。読み込みの進捗状況をユーザーへ通知したり、ローディング表示を制御したりする際に活用できます。実装例以下のコードを実行して、onprogress属性の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>   &n