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

HTMLで再生の準備ができたときにスクリプトを実行する方法（oncanplay属性の使い方）

動画や音声などのメディアファイルがブラウザ上で再生を開始できる状態になったタイミングで、JavaScriptを実行したいケースはよくあります。そんなときに活躍するのが、HTML5のoncanplay属性です。

oncanplay属性とは

oncanplay属性は、メディアのバッファリングがある程度進み、再生を開始できる状態になった時点で指定したスクリプトを実行するイベントハンドラです。この属性は、以下の要素に対して使用できます。

  • <audio>（音声）
  • <embed>（埋め込みコンテンツ）
  • <object>（埋め込みオブジェクト）
  • <video>（動画）

使用例

次のコードでは、動画の再生準備が整った時点でoncanplayイベントが発生し、アラートが表示されます。

<!DOCTYPE HTML>
<html>
  <body>
    <video width = "300" height = "200" controls oncanplay = "display()">
      <source src = "/html5/foo.ogg" type = "video/ogg" />
      <source src = "/html5/foo.mp4" type = "video/mp4" />
      お使いのブラウザはvideo要素に対応していません。
    </video>
    <script>
      alert("再生を開始できます。");
  </script>
 </body>
</html>

コードのポイント

このサンプルでは、<video>要素にoncanplay = "display()" を指定しています。動画ファイルの読み込みが完了し、ユーザーが再生ボタンを押せる状態になると、display()関数が呼び出され、アラートダイアログが表示されます。

また、<source>要素を使ってOGG形式とMP4形式の2つの動画ソースを用意することで、ブラウザごとの対応形式の違いにも柔軟に対応できる構成になっています。動画がサポートされていない環境向けには、フォールバックとして代替テキストを記述しておくと親切です。

  1. HTMLでエラー発生時にスクリプトを実行する方法｜onerrorイベントの使い方を解説

    HTMLでは、onerrorイベント属性を使うことで、エラーやリソースの読み込み失敗が発生した際にJavaScriptのスクリプトを自動的に実行できます。特に画像や外部ファイルが正しく読み込めなかった場合のエラーハンドリングに便利です。 onerrorイベントとは onerrorイベントは、対象の要素（imgタグなど）でエラーが発生したときにトリガーされます。例えば、指定した画像ファイルが存在しない、パスが間違っている、ネットワークの問題で読み込めないといったケースで発火します。 onerrorイベントの実装例 以下のコードは、画像の読み込みに失敗した場合にアラートを表示するシンプルなサンプル

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

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