HTML DOM Trackのdefaultプロパティとは？使い方とサンプルコードを解説
HTML DOMのTrack defaultプロパティは、トラック（字幕やキャプションなど）がユーザーの設定に反しない限り有効化されるかどうかを示すブール値（true/false）を取得・設定するためのプロパティです。
注意： 1つのメディア要素（audio/video）に対して、defaultが設定されたトラックは1つだけである必要があります。複数のトラックにdefaultを指定した場合、ブラウザによって動作が異なる可能性があります。
構文
ブール値を取得する場合
trackObject.default
defaultプロパティに値を設定する場合
trackObject.default = booleanValue
ここで「booleanValue」には以下の値を指定できます。
| booleanValue | 説明 |
|---|---|
| true | そのトラックがデフォルトで有効になることを定義します。 |
| false | ユーザーが明示的に選択しない限り、そのトラックは有効にならないことを定義します。 |
Track defaultプロパティの使用例
それでは、Track defaultプロパティの具体的な使用例を見てみましょう。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>Track default</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-default</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 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 = 'Default track for video: '+trackSelect[i].srclang;
}
</script>
</body>
</html>
実行結果
ボタンをクリックする前
「What is the default track?」ボタンをクリックする前の画面は以下の通りです。動画プレイヤーとボタンだけが表示されています。
ボタンをクリックした後
ボタンをクリックすると、JavaScriptによって各track要素のdefaultプロパティがチェックされ、defaultがtrueになっているトラックの言語コード（この例ではスペイン語を示す「es」）が画面に表示されます。
まとめ
Track defaultプロパティを使うことで、動画や音声に含まれる複数の字幕トラックの中から、どれを初期状態で表示するかを制御できます。HTML側で<track default>属性を付与する方法と、JavaScriptからtrackObject.default = trueのように動的に設定する方法の両方が利用可能です。多言語対応の動画コンテンツを作成する際に非常に便利なプロパティなので、ぜひ活用してみてください。
-
HTML DOM Trackのsrclangプロパティの使い方を徹底解説
HTML DOMのTrackオブジェクトが持つsrclangプロパティは、テキストトラック（字幕やキャプションなど）の言語を取得、または設定するためのプロパティです。この記事では、srclangプロパティの基本的な構文から、実際に動作するサンプルコードまでをわかりやすく解説します。srclangプロパティの構文srclangプロパティの使い方は、値の取得と設定の2パターンがあります。値を取得する場合（文字列型で返却）trackObject.srclang値を設定する場合trackObject.srclang = stringValue設定できる値は、ISO 639-1などで定義された言語コード
-
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要素内