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

HTMLのonwaiting属性とは？動画が一時停止・バッファリング中にスクリプトを実行する方法

HTMLのonwaiting属性は、動画が一時停止し、再生を再開するためにバッファリングを行っているときに発生するイベントです。ネットワーク速度の低下などで動画が途切れ、読み込み待ちの状態になった瞬間に、指定したJavaScriptの関数を実行できます。

例えば、「バッファリング中です」といったメッセージをユーザーに表示したり、ローディングアニメーションを表示したりする処理に活用すると便利です。

onwaiting属性の基本的な使い方

以下のコードでは、video要素にonwaiting属性を設定し、バッファリングが発生したときに画面上のテキストを変更しています。実際に動作を確認したい場合は、次のコードを試してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <h2 id = "test">Play</h2>
      <video id = "myid" width = "320" height = "176" controls onwaiting = "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 = "Media resumes again";
         }
      </script>
   </body>
</html>

コードの解説

  • video要素には、ogg形式とmp4形式の2つのsource要素を指定しており、ブラウザが対応している形式が自動的に選択されます。
  • onwaiting属性には「myFunction()」を指定しており、動画がバッファリング状態になるとこの関数が呼び出されます。
  • myFunction内では、getElementByIdを使ってidが「test」のh2要素を取得し、innerHTMLでテキストを書き換えています。

なお、onwaitingイベントは動画の再生開始前やシーク操作の際にも発生することがあります。関連するイベントとしては、再生が再開されたときに発生するonplayingや、一時停止したときに発生するonpauseなどがあり、これらと組み合わせることでより柔軟な動画プレイヤーの制御が可能になります。

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

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

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

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