您如何使用＆lt; video＆gt;如何將視頻嵌入HTML。 標籤？

如何使用

要使用<video></video>標籤將視頻嵌入HTML中，您可以使用以下基本結構：

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </source></video></code>

在此示例中：

• width和height屬性定義了視頻播放器的大小。
• controls屬性添加了播放，暫停和音量控件。
• <video></video>元素中的<source></source>標籤指定要播放的視頻文件。 src屬性指向視頻文件， type屬性指示資源的MIME類型。
• 文本“您的瀏覽器不支持視頻標籤”作為後備內容，以防瀏覽器不支持<video></video>元素。

為了確保使用<video></video>標籤時跨瀏覽器的兼容性，您應該考慮以下基本屬性：

1. SRC ：指定視頻文件的URL。雖然您可以直接在<video></video>標籤上使用此屬性，但最好在<source></source>元素中使用它來提供多種視頻格式。
2. 類型：與<source></source>元素一起使用，以指示視頻文件的MIME類型。這有助於瀏覽器確定要使用的源。
3. 控件：添加基本視頻控件，例如播放，暫停和音量。最好將此屬性包含在可用性上，儘管您可以在需要時設計自定義控件。
4. 寬度和高度：設置視頻播放器的尺寸。這些可以幫助防止在視頻加載時佈局變化。
5. 預緊力：指定應該如何預加載視頻。選項包括none （沒有預加載）， metadata （僅元數據，如持續時間）或auto （加載整個視頻）。這會影響性能和用戶體驗。
6. 海報：指定視頻下載時要顯示的圖像或直到用戶鍵入播放按鈕為止。

通過使用這些屬性，您可以在不同的瀏覽器上增強視頻的兼容性。

您可以列出

<video></video>支持標籤支持的常見視頻格式包括：

1. MP4 ：在現代瀏覽器中得到廣泛支持。要指定MP4文件，請使用：

    <code class="html"><source src="video.mp4" type="video/mp4"></source></code>

2. WebM ：由Chrome，Firefox，Opera和Edge支持。要指定WebM文件，請使用：

    <code class="html"><source src="video.webm" type="video/webm"></source></code>

3. OGG ：由Firefox，Opera和一些較舊版本的Chrome支持。要指定OGG文件，請使用：

    <code class="html"><source src="video.ogv" type="video/ogg"></source></code>

為了確保更廣泛的兼容性，您可以列出<video></video>標籤中的多個<source></source>元素，從而允許瀏覽器選擇第一個支持的格式：

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> Your browser does not support the video tag. </source></source></source></video></code>

如何將字幕或字幕添加到帶有

要將字幕或字幕添加到帶有<video></video>標籤的視頻中，您可以使用<track></track>元素。以下是：

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> Your browser does not support the video tag. </track></source></video></code>

在此示例中：

• <track></track>元素的src屬性指向包含字幕或字幕的WebVtt（Web視頻文本跟踪）文件。
• kind屬性指定文本軌道的類型。選項包括subtitles ， captions ， descriptions ， chapters和metadata 。對於字幕或字幕，請使用subtitles或captions 。
• srclang屬性指示文本曲目的語言（例如， en ）。
• label屬性為文本軌道提供了一個可讀的標題，可以在菜單中顯示以選擇不同的字幕。

為了確保字幕或字幕顯示，請確保視頻播放器支持它們（現代瀏覽器），並正確格式化了WebVTT文件。例如，基本的WebVtt文件可能看起來像這樣：

 <code>WEBVTT 00:00:00.000 --> 00:00:05.000 Hello, welcome to my video! 00:00:05.001 --> 00:00:10.000 Today we'll be discussing how to use the video tag.</code>

這將在視頻播放期間的指定時間顯示相應的文本。

以上是您如何使用＆lt; video＆gt;如何將視頻嵌入HTML。 標籤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！