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

HTMLのtrack要素でoncuechange属性を使ってキュー変更時にスクリプトを実行する方法

HTMLのoncuechange属性は、動画や音声の再生中にキュー（cue）が切り替わったタイミングでスクリプトを実行するためのイベント属性です。この属性は、字幕やキャプションのトラックを定義する<track>要素と組み合わせて使用します。

たとえば、字幕の表示内容が切り替わる瞬間にアラートを表示したい場合、次のようにoncuechange属性を記述します。

<video>
    <track oncuechange = "alert('Changed!')">
</video>

実装例

以下のコードは、oncuechange属性を実際に使ったサンプルです。動画に英語の字幕トラックを読み込ませ、キューが変更されるたびに「Changed!」というアラートが表示されます。

<!DOCTYPE HTML>
<html>
    <body>
        <video width = "300" height = "200" controls autoplay>
            <source src = "/html5/foo.ogg" type = "video/ogg" />
            <source src = "/html5/foo.mp4" type = "video/mp4" />
            <track src = "subtitles_en.vtt" kind = "subtitles" srclang = "en" label="English" oncuechange = "alert('Changed!')">
            お使いのブラウザはvideo要素に対応していません。
        </video>
    </body>
</html>

ポイント解説

  • kind = "subtitles"：トラックの種類を字幕として指定しています。
  • srclang = "en"：字幕の言語を英語として指定します。
  • label = "English"：プレイヤーの字幕選択メニューに表示されるラベル名です。
  • WebVTT形式（.vtt）のファイルをsrc属性で読み込み、再生中にキューが切り替わるとoncuechangeイベントが発火します。

なお、oncuechangeイベントはキュー単位で発生するため、JavaScript側でevent.target.track.activeCuesなどを参照すると、現在アクティブになっているキューの内容を取得することも可能です。字幕のハイライト表示や連動コンテンツの制御など、応用範囲は広いのでぜひ活用してみてください。

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

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

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

    HTMLでは、onratechange属性を使用することで、動画や音声の再生速度が変更されるたびに指定したJavaScriptのスクリプトを実行できます。この属性は、ユーザーが再生速度を変更した瞬間を検知したい場合に非常に便利です。onratechange属性の基本的な使い方onratechange属性は、<video>要素や<audio>要素に設定でき、playbackRateプロパティの値が変化したタイミングでイベントが発生します。以下のコード例では、スライダー（レンジ入力）で動画の再生速度を変更すると、その都度現在の再生速度が画面に表示される仕組みを実装しています