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

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

HTMLでは、onprogress属性を使用することで、ブラウザがメディアデータ（動画や音声）をダウンロードしている最中にスクリプトを実行できます。

onprogress属性とは

onprogress属性は、ブラウザがメディアデータを取得（バッファリング）している間に発生するイベントです。読み込みの進捗状況をユーザーへ通知したり、ローディング表示を制御したりする際に活用できます。

実装例

以下のコードを実行して、onprogress属性の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <video id = "myVideo" width = "320" height = "176" controls onprogress = "display()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはHTML5動画に対応していません。
      </video>
      <script>
         function display() {
            alert("Started");
         }
      </script>
   </body>
</html>

この例では、video要素にonprogress属性を設定し、メディアデータの読み込みが進行している間、「display()」関数が呼び出されます。その結果、アラートで「Started」というメッセージが表示されます。

ポイント

・onprogressイベントは、データの読み込み中に繰り返し発生します。
・source要素を複数記述することで、ブラウザが対応していない形式の場合に代替フォーマットへ自動的に切り替えられます。
・非対応ブラウザ向けに、video要素内に代替テキストを記述しておくと親切です。

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

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

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

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