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

HTML DOM Trackのsrclangプロパティの使い方を徹底解説

HTML DOMのTrackオブジェクトが持つsrclangプロパティは、テキストトラック（字幕やキャプションなど）の言語を取得、または設定するためのプロパティです。

この記事では、srclangプロパティの基本的な構文から、実際に動作するサンプルコードまでをわかりやすく解説します。

srclangプロパティの構文

srclangプロパティの使い方は、値の取得と設定の2パターンがあります。

値を取得する場合（文字列型で返却）

trackObject.srclang

値を設定する場合

trackObject.srclang = stringValue

設定できる値は、ISO 639-1などで定義された言語コード（例：日本語なら「ja」、英語なら「en」、スペイン語なら「es」）の文字列です。

Track srclangプロパティの使用例

それでは、実際にsrclangプロパティを使用したサンプルコードを見てみましょう。この例では、動画に埋め込まれた複数のトラックの中から、デフォルト設定されているトラックの言語情報を取得して表示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>Track srclang</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-srclang</legend>
            <video id="videoSelect" controls width="250" src="sample.mp4">
            <track default kind="subtitles" srclang="es" src="sample-es.srt" label="Spanish" />
            <track kind="subtitles" srclang="en" src="sample-en.srt" label="English" />
            </video><br>
            <input type="button" onclick="getTrackDetails()" value="What is the language of default track?">
            <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 && trackSelect[i].srclang === 'es')
                divDisplay.textContent = 'Language of default track: '+trackSelect[i].label;
    }
</script>
</body>
</html>

コードのポイント

  • <video>要素内に、スペイン語（srclang="es"）と英語（srclang="en"）の2つの字幕トラックを配置しています。
  • スペイン語側のトラックにはdefault属性が付与されているため、初期状態で選択されるトラックになります。
  • ボタンをクリックするとgetTrackDetails()関数が呼び出され、defaultかつsrclangが「es」であるトラックを検索し、そのlabel（表示名）を画面に出力します。

実行結果

「What is the language of default track?」ボタンをクリックする前の表示は次の通りです。

HTML DOM Trackのsrclangプロパティの使い方を徹底解説

ボタンをクリックすると、デフォルトトラックの言語情報が出力されます。

HTML DOM Trackのsrclangプロパティの使い方を徹底解説

まとめ

srclangプロパティを使えば、JavaScriptから動的にテキストトラックの言語を参照・変更できます。多言語対応の動画プレーヤーを実装する際に、ユーザーの言語設定に応じて字幕トラックを切り替えるといった処理に活用できるでしょう。

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

    HTML DOMのTrack defaultプロパティは、トラック（字幕やキャプションなど）がユーザーの設定に反しない限り有効化されるかどうかを示すブール値（true/false）を取得・設定するためのプロパティです。 注意： 1つのメディア要素（audio/video）に対して、defaultが設定されたトラックは1つだけである必要があります。複数のトラックにdefaultを指定した場合、ブラウザによって動作が異なる可能性があります。 構文 ブール値を取得する場合 trackObject.default defaultプロパティに値を設定する場合 trackObject.default =

  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要素内