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

HTMLのtrack要素でテキストトラックにタイトル（ラベル）を付ける方法

HTMLでテキストトラック（字幕など）にタイトルを表示するには、<track>要素のlabel属性を使用します。label属性に指定した値は、動画プレーヤーの字幕選択メニューなどに表示され、ユーザーがどの字幕トラックかを識別しやすくなります。

label属性の基本的な使い方

以下のコードは、英語とロシア語の2つの字幕トラックにそれぞれlabel属性でタイトルを付けた実装例です。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE HTML>
<html>
   <body>
      <video width = "450" height = "300" controls autoplay>
         <source src = "/html5/foo.ogg" type = "video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         <track src ="subtitles_en.vtt" kind = "subtitles" srclang = "en" label = "English">
         <track src = "subtitles_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russia" default>
         お使いのブラウザはvideo要素に対応していません。
      </video>
   </body>
</html>

各属性の役割

  • src：字幕データ（WebVTT形式の.vttファイル）へのパスを指定します。
  • kind：トラックの種類を指定します。「subtitles」（字幕）のほかに「captions」（キャプション）や「descriptions」（音声解説）などがあります。
  • srclang：トラックの言語をBCP 47形式（例：en、ja、ru）で指定します。
  • label：トラックのタイトルとして表示される文字列を指定します。ここが本記事の主題です。
  • default：この属性を付けたトラックが、初期状態で有効になります。

ポイント

label属性は省略可能ですが、複数の字幕トラックを用意する場合は必ず指定することをおすすめします。labelを指定しないと、ユーザーが字幕を選択する際にトラックを区別できず、利便性が大きく損なわれるためです。また、字幕ファイルはWebVTT（.vtt）形式で作成する必要がある点にも注意してください。

  1. Tkinterでラベルのテキストサイズを変更する方法

    Tkinterにおけるラベル（Label）ウィジェットは、アプリケーション内にテキストや画像を表示するために使用される基本的な部品です。ラベルのフォント、文字色、背景色、前景色などの各種プロパティを変更したい場合は、configure()メソッドを利用します。特にラベル内のテキストサイズを変更したい場合は、ウィジェットのコンストラクタやconfigメソッドでfont=（フォントファミリー サイズ スタイル）という形式のプロパティを指定することで実現できます。サンプルコード# 必要なライブラリをインポート from tkinter import * import tkinter.font as

  2. Tkinterでラベルのテキストを取得する方法を解説

    TkinterのLabel（ラベル）ウィジェットは、ウィンドウ上にテキストや画像を表示するために使用される基本的なコンポーネントです。フォントファミリーやパディング、幅・高さなどのオプションを指定することで、ラベルの見た目を自由にカスタマイズできます。ラベルに設定したテキストを取得したい場合は、ラベルウィジェットに対して [text] を指定するだけで、簡単にその値へアクセスできます。以下に具体的なサンプルコードを示します。サンプルコード# 必要なライブラリをインポート from tkinter import * # tkinterフレームのインスタンスを作成 win = Tk() # ウ