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

HTMLでメディアデータの読み込み時にスクリプトを実行する方法（onloadeddataイベント）

メディアデータが読み込まれたタイミングでスクリプトを実行したい場合は、onloadeddataイベントを使用します。このイベントは、動画や音声などのメディアの最初のフレーム（データ）が読み込まれた時点で発生し、任意のJavaScript関数を呼び出すことができます。

onloadeddataイベントとは

onloadeddataは、HTML5のメディア要素（<video>や<audio>）で利用できるイベントハンドラの一つです。メディアのデータがブラウザにロードされた瞬間に指定した処理を実行できるため、読み込み完了の通知表示や、プレイヤーの初期化処理などに活用できます。

実装例

以下のコードでは、動画のデータが読み込まれるとアラートボックスを表示します。video要素にonloadeddata属性を設定し、読み込み完了時にdisplay()関数を呼び出しています。

<!DOCTYPE html>
<html>
   <body>
      <video controls onloadeddata = "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>

コードのポイント

<source>要素で複数の形式（ogg・mp4）を指定することで、ブラウザごとの対応フォーマットの違いに対応できます。また、どの形式も再生できない環境向けに、video要素内に代替テキストを記述しておくと親切です。

  1. HTMLで要素が無効なときにスクリプトを実行する方法｜oninvalid属性の使い方

    HTMLでフォームの要素が無効（バリデーションエラー）になったときにスクリプトを実行したい場合は、oninvalid属性を使用します。oninvalid属性とは？oninvalidは、入力フィールドの値が検証ルールを満たさなかった場合に発火するイベント属性です。例えば、required属性が指定された入力欄が空のままフォームを送信しようとしたときなどに、アラート表示やカスタムメッセージの処理をJavaScriptで実行できます。サンプルコード以下のコードでは、学生IDの入力欄が空のまま送信ボタンが押されたときに、oninvalid属性によって警告メッセージを表示します。<!DOCTYPE

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

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