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

【HTML】onpause属性の使い方｜メディア一時停止時にスクリプトを実行する方法

onpause属性とは

HTMLのonpause属性は、動画や音声などのメディアが一時停止（ポーズ）された瞬間に指定したJavaScriptの関数を実行するためのイベントハンドラです。ユーザーが再生コントロールの停止ボタンを押した場合でも、スクリプトからpause()メソッドを呼び出してプログラム的に停止させた場合でも、このイベントは発生します。

例えば、「メディアが一時停止されたら画面にメッセージを表示する」「視聴履歴を記録する」といった処理を、onpause属性を使えば簡単に実装できます。

実装例：メディアの一時停止を検知して表示を切り替える

以下のコードでは、動画が一時停止されると、見出しのテキストが「Play」から「Media paused!」に自動的に変更されます。

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

コードのポイント

  • <video>タグ内の onpause 属性：ここに関数名を指定することで、動画が一時停止されたタイミングでmyFunction()が呼び出されます。
  • controls属性：ブラウザ標準の再生・一時停止ボタンを表示し、ユーザーが操作できるようにしています。
  • <script>タグ内の処理：getElementById()で見出し要素を取得し、innerHTMLを使って表示テキストを書き換えています。

addEventListenerによる代替方法

HTML属性ではなく、JavaScript側でaddEventListener()を使ってイベントを登録することもできます。こちらの方がHTMLとロジックを分離できるため、保守性の高いコードになります。

const video = document.getElementById("myid");
video.addEventListener("pause", () => {
  console.log("メディアが一時停止されました");
});

まとめ

onpause属性を使うことで、メディアが一時停止されたタイミングを簡単に検知できます。ユーザー操作・プログラムによる停止のどちらにも対応しているため、プレイヤーのUI制御やアナリティクス計測など、さまざまな場面で活用できる便利なイベントハンドラです。

  1. ユーザーがHTML要素にテキストを貼り付けたときにスクリプトを実行する方法（onpaste属性）

    HTMLでは、ユーザーが要素にテキストを貼り付けた瞬間に onpaste 属性（イベントハンドラ）がトリガーされます。この属性を活用することで、貼り付け操作を検知し、任意のJavaScript関数を実行することができます。onpaste属性の基本的な使い方以下のコードは、テキスト入力欄に何かを貼り付けたときに display() 関数を呼び出すシンプルな例です。実際にブラウザで動作させて確認してみてください。<!DOCTYPE html> <html>    <body>       <input ty

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

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