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

HTMLでメディアの再生開始時にスクリプトを実行する方法（onplaying属性の使い方）

HTMLでは、onplaying属性を使うことで、音声や動画の再生が実際に開始されたタイミングでスクリプトを実行できます。この属性を活用すれば、「再生が始まりました」といったメッセージをユーザーに通知したり、再生開始に合わせて他の処理を呼び出したりすることが可能です。

onplaying属性とは

onplayingは、メディア（audio要素・video要素）が一時停止やバッファリングの後、再生を開始した瞬間に発火するイベントハンドラです。読み込みが完了した時点ではなく、実際に再生が始まった時点で処理が実行される点が特徴です。

サンプルコード

以下のコードを実行すると、動画の再生が開始されたときにスクリプトが実行され、アラートが表示される仕組みを確認できます。

<!DOCTYPE html>
<html>
   <body>
      <video id = "myid" width = "350" height = "200" controls onplaying = "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要素にonplaying = "display()"を指定しています。ユーザーが再生ボタンを押して動画の再生が始まると、display()関数が呼び出され、アラートで「動画の再生が開始されました！」というメッセージが表示されます。

また、source要素を複数記述することで、ブラウザが対応していない形式の場合に代替の動画ファイル（OGG形式→MP4形式）へ自動的に切り替える仕組みにもなっています。最後のテキストは、どちらの形式もサポートしていない環境向けのフォールバック表示です。

まとめ

onplaying属性を使えば、メディアの再生開始をトリガーにしたJavaScriptの実行が簡単に実装できます。再生状況に応じたUIの表示変更やログ取得など、さまざまな場面で活用できるので、ぜひ覚えておきましょう。

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

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

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

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