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

HTMLのonratechange属性で再生速度が変わるたびにスクリプトを実行する方法

HTMLでは、onratechange属性を使用することで、動画や音声の再生速度が変更されるたびに指定したJavaScriptのスクリプトを実行できます。この属性は、ユーザーが再生速度を変更した瞬間を検知したい場合に非常に便利です。

onratechange属性の基本的な使い方

onratechange属性は、<video>要素や<audio>要素に設定でき、playbackRateプロパティの値が変化したタイミングでイベントが発生します。

以下のコード例では、スライダー（レンジ入力）で動画の再生速度を変更すると、その都度現在の再生速度が画面に表示される仕組みを実装しています。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <video id = "myid" width = "320" height = "176" controls onratechange = "display()">
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         お使いのブラウザはvideo要素に対応していません。
      </video>
      <p id="test">動画の再生速度を変更してください</p>
      <input type = "range" min = "0.1" max = "3" step = "0.2" value = "1" oninput = "update(this)">
      <script>
         function display() {
            document.getElementById("test").innerHTML = "再生速度： " + document.getElementById("myid").playbackRate;
         }
         function update(ob) {
            document.getElementById("myid").playbackRate = ob.value;
         }
      </script>
   </body>
</html>

コードの解説

  • video要素：onratechange = "display()"を設定することで、再生速度が変わるたびにdisplay()関数が呼び出されます。
  • range入力（スライダー）：0.1倍から3倍まで、0.2刻みで再生速度を調整できます。スライダーを動かすとupdate()関数により動画のplaybackRateが更新されます。
  • display()関数：現在のplaybackRateの値を取得し、<p id="test">要素内に「再生速度： ○○」という形式で表示します。

実行結果

このコードを実行すると、動画プレイヤーの下にスライダーが表示されます。スライダーを操作して再生速度を変更すると、その値に応じて表示テキストがリアルタイムに更新され、現在の再生速度を確認できます。

  1. HTMLでドキュメント印刷後にスクリプトを実行する方法【onafterprint属性】

    HTMLの onafterprint 属性を使うと、ドキュメントが印刷された後（または印刷処理の実行時）にスクリプトを実行できます。この属性は、<body> 要素などに指定することで、ユーザーが印刷操作を行ったタイミングを検知し、アラート表示やログ記録などの処理を自動的に実行できます。基本的な使い方onafterprint 属性は、イベントハンドラとして関数名を指定するだけで簡単に利用できます。印刷ダイアログが閉じられ、印刷処理が完了した直後に、指定したJavaScriptの関数が呼び出されます。サンプルコード以下のコードを実行して、onafterprint 属性の動作を確認してみ

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

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