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

HTML DOM Trackオブジェクトとは？主要プロパティと使い方を実例付きで解説

HTML DOM Trackオブジェクトとは

HTML DOM の Track オブジェクトは、HTML の <track> 要素を JavaScript から操作するためのインターフェースです。<track> 要素は、動画に対して字幕（subtitles）やキャプション（captions）などのテキストトラックを関連付ける際に使用されます。

<track> 要素の作成方法

JavaScript で新しい <track> 要素を作成するには、document.createElement() メソッドを使用します。

var trackObject = document.createElement("TRACK");

Track オブジェクトの主なプロパティ

作成された trackObject には、以下のプロパティが用意されています。

プロパティ説明
defaultそのトラックがデフォルト状態かどうかを設定・取得します
kindtrack 要素の kind 属性の値を設定・取得します
labeltrack 要素の label 属性の値を設定・取得します
readyStateトラックリソースの現在の読み込み状態を返します
srctrack 要素の src 属性の値を設定・取得します
srclangtrack 要素の srclang 属性の値を設定・取得します
tracktrack 要素のテキストトラックデータを表す TextTrack オブジェクトを返します

サンプルコード：kind プロパティの使い方

それでは、Track オブジェクトの kind プロパティを使った具体的な例を見てみましょう。このサンプルでは、動画に設定されたデフォルトトラックの種類（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="デフォルトトラックの種類は？">
            <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].kind;
    }
</script>
</body>
</html>

コードのポイント

  • 動画にはスペイン語（es）と英語（en）の2つの字幕トラックが設定されており、スペイン語側に default 属性が付いています。
  • ボタンをクリックすると getTrackDetails() 関数が呼び出され、すべての track 要素をループ処理します。
  • default プロパティが true のトラックを見つけると、その kind プロパティの値を画面に表示します。

実行結果

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

HTML DOM Trackオブジェクトとは？主要プロパティと使い方を実例付きで解説

ボタンをクリックした後の画面。デフォルトトラックの kind 値である「subtitles」が表示されます：

HTML DOM Trackオブジェクトとは？主要プロパティと使い方を実例付きで解説

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

    HTML DOM Track kind プロパティとは HTML DOM の kind プロパティは、<track> 要素の kind 属性の値を取得・設定するためのものです。この属性を使うことで、動画や音声ファイルに関連付けるテキストトラックの種類（字幕やキャプションなど）を指定できます。 構文 kind プロパティの値を取得する場合は以下のように記述します。 trackObject.kind kind プロパティに新しい値を設定する場合は次のとおりです。 trackObject.kind = stringValue stringValue に指定できる値の一覧 「strin

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注