ホームページ > ウェブフロントエンド > H5 チュートリアル > html5 のトラックタグは何を意味しますか? html5トラックタグの使い方の紹介

html5 のトラックタグは何を意味しますか? html5トラックタグの使い方の紹介

寻∝梦
リリース: 2018-08-23 17:40:51
オリジナル
5684 人が閲覧しました

この記事では、html5 トラック タグの定義とその使用方法、および html5 トラック タグのオプション属性の説明を紹介します。ぜひこの記事をよく読んでください。

html5 トラック タグの定義と使用法:

タグは、ビデオ要素などのメディアの外部テキスト トラックを指定します。

メディアの再生時に表示される字幕ファイルまたはテキストを含むその他のファイルを指定するために使用されます。

html5 タグのオプション属性:

  • default: デフォルトのトラック。 (値: デフォルト)。デフォルト属性は、ユーザーが他の字幕ファイルの使用を選択しない場合に、現在のトラック ファイルが使用できることをブラウザーに通知するために使用されます。

  • 種類: テキスト トラックのテキスト タイプ (値: キャプション、チャプター、説明。 、メタデータ、字幕)。 kind 属性は、字幕ファイル (つまり、字幕、章タイトル、説明テキスト、またはメタデータを保存するために使用されるファイル) のタイプを指定するために使用されます。 kind属性に指定できる属性値は、字幕、キャプション、説明文、チャプター、メタデータです

  • label:テキストトラックのラベルとタイトル(値:text)。

  • src: トラックファイルの URL、必須属性 (値: URL)。 src 属性は、字幕ファイルの保存パスを指定するために使用されます。この属性は必須の属性です。 src 属性の属性値には、絶対 URL パスまたは相対 URL パスを指定できます。

  • srclang: トラックテキストデータの言語。 (値: language_code )。 srclang 属性は、字幕ファイルの言語を指定するために使用されます。たとえば、srclang="en" と srclang="zh-cn" は、それぞれ字幕ファイルが英語と中国語であることを示します。 < Track> HTMLグローバル属性とHTMLイベント属性をサポートしていますHTML5 のオブジェクト

  • Track オブジェクトは HTML5 で新しく追加されました。

Track オブジェクトは HTML5 の 要素を表します。

html5 で Track オブジェクトにアクセスしますgetElementById() を使用して 要素にアクセスできます:

<track src="URL">
ログイン後にコピー

html5 で Track オブジェクトを作成します document.createElement() メソッドを使用して < ;track> ; 要素:

<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en"
label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no"
label="Norwegian">
</video>
ログイン後にコピー

HTML5 track タグの使用の概要:

track 要素は、video 要素を使用して再生されるビデオや、audio を使用して再生されるオーディオに字幕、タイトル、チャプターなどのテキスト情報を追加できます。要素。 track 要素を使用してビデオに字幕を追加するプロセスは、オーディオに字幕を追加するプロセスと同じです。 track要素はvideo要素の子要素であり、video要素の開始タグと終了タグの間にタグを記述する必要があります。 タグを使用してメディア ファイルを記述する場合、 タグは タグの後に記述する必要があります。 track 要素は、開始タグと終了タグの間にコンテンツが含まれない空の要素です。

ブラウザのサポート

Internet Explorer 10、Chrome、Opera は タグをサポートします。

HTML 4.01とHTML 5の違い

タグはHTML 5の新しいタグです。
【編集者のおすすめ関連情報】

html includeタグの使い方を詳しく解説(使用例付き)

html5のtableタグのスタイル紹介(html5テーブルCSSのセンタリング例付き)

以上がhtml5 のトラックタグは何を意味しますか? html5トラックタグの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート