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

HTMLでメディアの再生時間が変更されたときにスクリプトを実行する方法（ondurationchange属性）

HTMLのondurationchange属性は、音声や動画などのメディアの再生時間（長さ）が変更されたタイミングでスクリプトを実行するためのイベントハンドラです。

動画ファイルの読み込みが完了し、ブラウザがメタデータを取得して再生時間が確定したときなどに、このイベントが発生します。例えば、動画の長さをユーザーに通知したり、再生時間に応じた処理を行いたい場合に便利です。

ondurationchange属性の基本的な使い方

以下のコードは、ondurationchange属性を使って、動画の再生時間が変更されたときにアラートでその長さ（秒数）を表示するシンプルな実装例です。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "300" height = "200" controls ondurationchange = "display(this)">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素をサポートしていません。
      </video>
      <script>
         function display(vLength) {
            alert("Video Length: " + vLength.duration + " seconds");
         }
      </script>
   </body>
</html>

コードの解説

このサンプルコードのポイントは以下のとおりです。

  • ondurationchange属性： video要素に直接指定することで、再生時間が変更されたときに関数display(this)が呼び出されます。thisには対象のvideo要素自身が渡されます。
  • durationプロパティ： メディア要素のdurationプロパティから、現在の再生時間を秒単位の数値として取得できます。
  • 複数のsource要素： Ogg形式とMP4形式の両方を指定しておくことで、ブラウザ側が対応している形式を自動的に選択します。

なお、ondurationchangeイベントは、動画や音声の読み込み時に再生時間が初めて判明したときにも発生します。動的にソースを切り替えた場合にも発火するため、再生時間の表示更新などにも活用できます。

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

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

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

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