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

HTMLのonseeked属性とは？動画・音声のシーク完了時にスクリプトを実行する方法

HTMLの onseeked 属性は、ユーザーが音声や動画の再生位置をスキップしたり、別の位置へ移動（シーク）したりしたときに、指定されたスクリプトを実行するイベント属性です。

類似の属性に onseeking がありますが、こちらはシーク操作が開始された瞬間に発火するのに対し、onseeked はシーク操作が完了したタイミングで発火する点が異なります。再生位置が変わった直後に何らかの処理を行いたい場合は、onseeked 属性を使用します。

サンプルコード

以下のコードを実行すると、onseeked 属性の動作を確認できます。動画内で再生位置をドラッグなどで移動させると、見出し部分に現在の再生時間が表示されます。

<!DOCTYPE html>
<html>
   <body>
      <h2 id = "test">Play</h2>
      <video id = "myid" width = "320" height = "176" controls onseeked = "myFunction()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the video element.
      </video>
      <script>
         function myFunction() {
         document.getElementById("test").innerHTML = "Current position: " +
         document.getElementById("myid").currentTime;
         }
      </script>
   </body>
</html>

コードの解説

  • video要素: width・height でサイズを指定し、controls 属性により再生・シーク用のコントロールバーを表示しています。
  • source要素: ブラウザごとに対応形式が異なるため、OGG形式とMP4形式の2つの動画ソースを用意しています。ブラウザは上から順に再生可能なものを選択します。
  • onseeked属性: シークが完了すると myFunction() が呼び出されます。
  • myFunction(): video要素の currentTime プロパティ（現在の再生位置・秒数）を取得し、id="test" の見出しに表示します。

このように onseeked 属性を使うことで、ユーザーが再生位置を変更した瞬間を捉え、字幕の再同期や広告表示、ログ記録など、さまざまなインタラクティブな処理を簡単に実装できます。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実