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

HTML DOM Track kind プロパティの使い方と種類を徹底解説

HTML DOM Track kind プロパティとは

HTML DOM の kind プロパティは、<track> 要素の kind 属性の値を取得・設定するためのものです。この属性を使うことで、動画や音声ファイルに関連付けるテキストトラックの種類（字幕やキャプションなど）を指定できます。

構文

kind プロパティの値を取得する場合は以下のように記述します。

trackObject.kind

kind プロパティに新しい値を設定する場合は次のとおりです。

trackObject.kind = stringValue

stringValue に指定できる値の一覧

「stringValue」には、以下の5種類の値を指定できます。

値説明
captionsセリフや効果音などの翻訳・文字起こしを表示します。聴覚障害のあるユーザーにとって便利な形式です。
chaptersチャプターのタイトルを定義します。メディアリソース内を移動する際のナビゲーションに利用されます。
descriptions映像の内容を文章で説明します。視覚障害のあるユーザーにとって役立つ形式です。
metadataユーザーには表示されない情報で、主に JavaScript などのスクリプトから利用されます。
subtitles動画に字幕を表示するために使用されます。最も一般的なテキストトラックの種類です。

Track kind プロパティの実装例

それでは、実際に Track kind プロパティを使用したサンプルコードを見てみましょう。

サンプルコード

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

実行結果

このサンプルでは、動画要素にスペイン語（es）と英語（en）の2つの字幕トラックが設定されており、スペイン語側には default 属性が付与されています。

「What is the kind of default track?」ボタンをクリックする前：

HTML DOM Track kind プロパティの使い方と種類を徹底解説

「What is the kind of default track?」ボタンをクリックした後：

HTML DOM Track kind プロパティの使い方と種類を徹底解説

ボタンをクリックすると、JavaScript の getTrackDetails() 関数が実行され、default 属性が設定されている track 要素を検索して、その kind プロパティの値（この例では「subtitles」）が画面に表示されます。

まとめ

HTML DOM の Track kind プロパティを使えば、JavaScript から動的にテキストトラックの種類を取得・変更できます。アクセシビリティ対応（キャプションや音声解説）や多言語字幕の切り替えなど、メディアコンテンツをより使いやすくする際にぜひ活用してみてください。

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