如何使用＆lt; track＆gt;如何為視頻提供字幕和字幕。 元素？

本文說明瞭如何使用＆lt; track＆gt;元素要在HTML5視頻中添加字幕和字幕，重點介紹實現，可訪問性，自定義和支持格式。

如何使用＆Track> Element提供視頻字幕和字幕？

要使用<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>元素添加的字幕的外觀？

通常通過CSS來定制通過HTML5視頻中<track></track>元素添加的字幕的外觀。您可以針對::cue偽元素來定型文本及其背景。以下是自定義的步驟和示例：

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></track>元素支持視頻字幕和字幕的各種語言和格式：

1. 語言： <track></track>元素可以支持srclang屬性指定的任何人類語言。 srclang的價值應為有效的BCP 47語言標籤，其中可以包括語言，方言和區域的代碼（例如，英語的“ EN”，“ for French”，“ for French”，“ ES-MX”，對於墨西哥使用的西班牙語）。

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（subrip subtitle），儘管這些格式不太常用於<track></track>元素。

通過遵循這些準則和實踐，您可以使用<track></track>元素有效地提供，自定義和確保視頻內容的字幕和字幕可訪問性。

以上是如何使用＆lt; track＆gt;如何為視頻提供字幕和字幕。 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！