＆lt; track＆gt;を使用してビデオのキャプションと字幕を提供するにはどうすればよいですか 要素？

＆track>要素を使用して、ビデオのキャプションと字幕をどのように提供できますか？

<track></track>要素を使用してビデオのキャプションと字幕を提供するには、HTML内の特定の構造に従う必要があります。 <track></track>要素は、 <video></video>要素と組み合わせて使用​​され、時限テキストトラックを追加します。これは、字幕、キャプション、章、説明、またはメタデータなどです。これがあなたがそれを実装する方法です：

1. HTML構造： <track></track>要素を<video></video>要素の子として配置します。 <track></track>要素は、ビデオのソース要素の後に配置する必要があります。

2. 属性： <track></track>要素は、いくつかの属性を使用して、その動作とコンテンツを指定します。

   • kind ：テキストトラックのタイプを指定します。字幕とキャプションには、それぞれ「字幕」または「キャプション」を使用します。
   • src ：実際の字幕またはキャプションを含むWebVTTファイルを指します。
   • srclang ：テキストトラックの言語を指定します。これは、 kind 「字幕」に設定されている場合に必要です。
   • label ：トラックにユーザー読み取り可能なタイトルを提供します。これは、ブラウザがさまざまな言語やトラックの種類のオプションを表示するのに役立ちます。
   • default ：存在する場合、この属性は、ユーザーの設定が異なるものを示していない限り、トラックを有効にする必要があることを指定します。

ビデオに字幕とキャプションを追加する方法の例は次のとおりです。

 <code class="html"><video controls> <source src="video.mp4" type="video/mp4"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English"> <track kind="captions" src="captions_en.vtt" srclang="en" label="English Captions" default> </track></track></source></video></code>

この例では、 subtitles_en.vttとcaptions_en.vtt 、表示する実際のテキストを含むWebVTTファイルです。

＆track>要素を使用してビデオキャプションでアクセシビリティを確保するためのベストプラクティスは何ですか？

<track></track>要素を使用してビデオキャプションでアクセシビリティを確保するには、いくつかのベストプラクティスが含まれます。

1. 複数の言語オプションを提供します。さまざまな言語のトラックを含めて、多様な視聴者に対応します。 srclang属性を使用して、各トラックの言語を指定します。
2. 記述ラベルを使用します。 label属性を使用して、各トラックにクリアで説明的なラベルを提供します。これにより、特に複数の言語やトラックの種類が利用可能な場合、ユーザーが利用可能なオプションを理解するのに役立ちます。
3. キャプションとサブタイトルを正しく実装します。聴覚障害者や聴覚障害のある視聴者を対象としたキャプションにはkind="captions"を使用します。翻訳されたダイアログにkind="subtitles"を使用します。
4. 同期を確実にする：キャプションと字幕のタイミングは、オーディオに合わせて正確でなければなりません。これにより、視聴者が簡単に従うことができます。
5. アクセシビリティ機能：さまざまなユーザーニーズを満たすために、CSSを介してテキストのサイズ、色、背景を調整する機能などの追加機能を検討してください。
6. テスト：さまざまなブラウザーとデバイスのキャプションと字幕を定期的にテストして、それらが正しく機能し、すべてのユーザーがアクセスできるようにします。
7. フォールバックコンテンツ：何らかの理由でビデオコンテンツにアクセスできないユーザーに、テキストまたはトランスクリプトの代替品を提供します。これは、ビデオ要素内でリンクしたり、ページに提供したりできます。

html5ビデオの＆track>要素を介して追加された字幕の外観をどのようにカスタマイズしますか？

HTML5ビデオの<track></track>要素を介して追加された字幕の外観をカスタマイズすることは、通常、CSSを介して行われます。 ::cue pseudo-elementをターゲットにして、テキストとその背景をスタイリングできます。カスタマイズの手順と例を次に示します。

1. キューのターゲット：:: ::cue擬似要素を使用して、トラック内のテキストをスタイリングします。

2. スタイリングオプション：次のプロパティを変更して、外観をカスタマイズできます。

   • color ：テキストの色を変更します。
   • background-color ：テキストボックスの背景色を変更します。
   • text-shadow ：読みやすくするためにテキストに影を追加します。
   • font ：フォントファミリ、サイズ、スタイルを変更します。

字幕の外観をカスタマイズするCSSの例は次のとおりです。

 <code class="css">::cue { color: #ffffff; background-color: rgba(0, 0, 0, 0.6); font-family: Arial, sans-serif; font-size: 18px; text-shadow: 1px 1px 2px black; }</code>

このCSSは、テキストの色を白に変更し、半透明の黒い背景を適用し、フォントをArialに設定し、フォントサイズを増やし、より良いコントラストのためにテキストシャドウを追加します。

ビデオ字幕とキャプションをサポートしている＆トラック>要素はどの言語とフォーマットをサポートしていますか？

<track></track>要素は、ビデオ字幕とキャプションのさまざまな言語と形式をサポートしています。

1. 言語： <track></track>要素は、 srclang属性で指定されているように、あらゆる人間の言語をサポートできます。 srclangの価値は、言語、方言、地域のコード（英語の「en」、フランス語の「en」、メキシコで話されているスペイン語の「es-mx」のコードを含めることができる有効なBCP 47言語タグである必要があります。

2. 形式： <track></track>要素でサポートされるプライマリ形式はWebVTT（Webビデオテキストトラック）です。 WebVTTは、ビデオコンテンツと同期したタイミングされたテキストトラックを表示するための簡単なテキスト形式です。

   以下は、WebVTTファイル構造の基本的な例です。

    <code class="vtt">WEBVTT 00:00:00.000 --> 00:00:05.000 This is the first caption. 00:00:05.001 --> 00:00:10.000 This is the second caption.</code>

   WebVTTは最も広くサポートされている形式ですが、 <track></track>要素は、ブラウザ拡張またはポリフィルを介してTTML（タイミングテキストマークアップ言語）やSRT（サブリップサブタイトル）などの他の形式をサポートする可能性がありますが、これらは<track></track>要素と直接使用されていません。

これらのガイドラインとプラクティスに従うことにより、 <track></track>要素を使用してビデオコンテンツのキャプションと字幕のアクセシビリティを効果的に提供、カスタマイズ、および確保することができます。

以上が＆lt; track＆gt;を使用してビデオのキャプションと字幕を提供するにはどうすればよいですか 要素？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。