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

HTMLでメディアの再生準備が整ったときにスクリプトを実行する方法【oncanplay属性】

HTMLでは、oncanplay属性を使用することで、音声や動画が再生を開始できる状態になったタイミングを検知し、任意のスクリプトを実行できます。

oncanplay属性とは

oncanplay属性は、<audio>要素や<video>要素などのメディアにおいて、バッファリングがある程度進み、途中で止まることなく再生を開始できる状態になった時点で発生するイベントハンドラです。

このイベントを活用すると、「動画の読み込みが完了したらユーザーに通知を表示する」「ローディング画面を非表示にする」といった処理を簡単に実装できます。

サンプルコード

以下のコードを実行すると、動画の再生準備が整ったタイミングでスクリプトが実行される動作を確認できます。

<!DOCTYPE html>
<html>
   <body>
      <video id = "myid" width = "320" height = "176" controls oncanplay="display()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src ="/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザは video 要素に対応していません。
      </video>
      <script>
         function display() {
            alert("動画を読み込みました！");
         }
      </script>
   </body>
</html>

コードのポイント

  • <video>要素にoncanplay="display()"を指定し、再生可能になった瞬間に関数を呼び出しています。
  • <source>要素を複数記述することで、ブラウザが対応している形式（OGG / MP4）を自動的に選択します。
  • 関数display()内のalert()により、読み込み完了をユーザーに通知します。

関連するイベントとの違い

  • oncanplaythrough：バッファリングなしで最後まで再生できる状態になったときに発生します。
  • onloadeddata：最初のフレームのデータが読み込まれたときに発生します。
  • onloadedmetadata：動画の長さやサイズなどのメタデータが読み込まれたときに発生します。

用途に応じてこれらのイベントを使い分けることで、よりきめ細かいメディア制御が可能になります。

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

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

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

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