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

HTML DOM Track labelプロパティとは？使い方とサンプルコードを解説

HTML DOM Track labelプロパティとは？

HTML DOM の Track label プロパティは、<track> 要素の label 属性の値を取得・設定するためのプロパティです。label 属性には、動画プレイヤー上で字幕トラックなどを選択する際にユーザーへ表示されるテキスト（トラック名）を指定します。

構文

label 属性の値を取得する場合

trackObject.label

label 属性に値を設定する場合

trackObject.label = labelValue

サンプルコード

以下は、Track label プロパティを使った具体的な使用例です。動画に2つの字幕トラックを設定し、ボタンをクリックすると default 属性が付いたトラックのラベルを取得して画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Track label</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Track-label</legend>
            <video id="videoSelect" controls width="250" src="sample.mp4">
                <track default kind="subtitles" srclang="es" src="sample-en.srt" label="English"/>
                <track kind="subtitles" srclang="en" src="sample-es.srt" label="Spanish" />
            </video><br>
            <input type="button" onclick="getTrackDetails()" value="デフォルトトラックのラベルは？">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var trackSelect = document.getElementsByTagName("track");
    function getTrackDetails() {
        for(var i=0; i<trackSelect.length; i++)
            if(trackSelect[i].default)
                divDisplay.textContent = 'デフォルトトラックのラベル: '+trackSelect[i].label;
    }
</script>
</body>
</html>

実行結果

「デフォルトトラックのラベルは？」ボタンをクリックする前の画面：

HTML DOM Track labelプロパティとは？使い方とサンプルコードを解説

ボタンをクリックした後の画面：

HTML DOM Track labelプロパティとは？使い方とサンプルコードを解説

この例では、最初の <track> 要素に default 属性が設定されているため、ボタンをクリックするとそのトラックのラベル「English」が画面に表示されます。

ポイントまとめ

  • label プロパティは読み書き可能で、呼び出すと現在のラベル文字列を返します。
  • 新しい文字列を代入すれば、JavaScript から動的にラベルを変更できます。
  • label 属性の値は、ブラウザの字幕選択メニューなどにトラック名として表示されます。
  1. HTML DOM Trackのsrclangプロパティの使い方を徹底解説

    HTML DOMのTrackオブジェクトが持つsrclangプロパティは、テキストトラック（字幕やキャプションなど）の言語を取得、または設定するためのプロパティです。この記事では、srclangプロパティの基本的な構文から、実際に動作するサンプルコードまでをわかりやすく解説します。srclangプロパティの構文srclangプロパティの使い方は、値の取得と設定の2パターンがあります。値を取得する場合（文字列型で返却）trackObject.srclang値を設定する場合trackObject.srclang = stringValue設定できる値は、ISO 639-1などで定義された言語コード

  2. HTML DOM Track srcプロパティとは？構文とサンプルコードでわかりやすく解説

    Track srcプロパティとは HTML DOMのTrack srcプロパティは、<track>要素のsrc属性の値を取得または設定するためのプロパティです。src属性には、動画や音声に重ねて表示する字幕・キャプションなどのトラックファイルのURLを指定します。 構文 src属性の値を取得する場合 trackObject.src トラックファイルのURLを表す文字列値が返されます。 src属性に値を設定する場合 trackObject.src = URL 指定したURLがtrack要素のsrc属性に設定されます。 Track srcプロパティの使用例 次の例では、video要素内