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

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要素内に配置した2つのtrack要素の中からdefault属性が指定されたトラックを探し出し、そのsrc属性の値を取得して検証します。

<!DOCTYPE html>
<html>
<head>
<title>Track src</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>トラックのsrc</legend>
         <video id="videoSelect" controls width="250" src="sample.mp4">
            <track default kind="subtitles" srclang="es" src="sample-es.srt" label="English"/>
            <track kind="subtitles" srclang="en" src="sample-en.srt" label="Spanish" />
         </video><br>
         <input type="button" onclick="getTrackDetails()" value="デフォルトトラックのsrcは信頼できますか？">
         <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){
            console.log(trackSelect[i].src);
               if(trackSelect[i].src === 'sample-es.srt')
                  divDisplay.textContent = 'デフォルトトラックのsrcは信頼できます';
               else
                  divDisplay.textContent = 'デフォルトトラックのsrcは信頼できません';
         }
   }
</script>
</body>
</html>

出力結果

「デフォルトトラックのsrcは信頼できますか？」ボタンをクリックする前：

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

ボタンをクリックした後：

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

押さえておきたいポイント

  • srcプロパティを使うと、JavaScriptから字幕・キャプションファイルの場所を動的に確認したり、別のトラックファイルへ差し替えたりすることができます。
  • 関連するプロパティには、トラックの種類を示すkind、言語コードを示すsrclang、表示用ラベルのlabel、初期選択を示すdefaultなどがあります。
  • なお、srcプロパティを読み取る際、環境によっては相対URLが絶対URLに変換されて返される場合があるため、値を比較する際は注意してください。
  1. HTML DOM Trackのsrclangプロパティの使い方を徹底解説

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

  2. HTML DOM Video srcプロパティとは？動画URLの取得・設定方法を実例付きで解説

    HTML DOM の Video src プロパティは、<video> 要素で再生する動画のURL（ソース）に対応する文字列を取得、または設定するためのプロパティです。JavaScriptから動的に動画ファイルを差し替えたり、現在設定されているURLを参照したりする際に活用できます。構文srcプロパティの値を取得する場合mediaObject.srcsrcプロパティにURL文字列を設定する場合mediaObject.src = URLStringそれでは、HTML DOM Video src プロパティの具体的な使用例を見ていきましょう。サンプルコード以下の例では、ユーザー名として