html元素標簽是html5中新增的標簽，用于定義網頁文檔中的視頻資源文件，有關標簽的使用方法及作用詳解如下：

標簽的定義

標簽可以把指定的視頻資源文件插入頁面中播放；

標簽是 HTML 5 中新增的標簽。

標簽語法：?提示文本?

標簽可以設置播放視頻的高度和寬度，默認單位是px，而src屬性用來指定視頻資源的URL地址；

在和之間的“提示文本”，是用于當前瀏覽器不支持標簽時顯示的文本內容；

標簽支持的視頻格式

目前，標簽支持以下三種視頻格式：

1、Ogg格式：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。

2、MP4格式：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG-4 文件。

3、WebM格式：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。

標簽屬性屬性值描述

srcurl要播放的視頻 URL地址。

autoplayautoplay如果出現該屬性，則視頻在就緒后馬上播放。

controlscontrols如果出現該屬性，則向用戶顯示控件，比如播放按鈕。

widthpixels設置視頻播放器的寬度。

heightpixels設置視頻播放器的高度。

looploop如果出現該屬性，則當媒介文件完成播放后再次開始播放。

mutedmuted如果出現該屬性，視頻的音頻輸出為靜音。

autobufferautobuffer設置視頻緩沖

posterURL規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。

preloadauto

metadata

none如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。

auto - 當頁面加載后載入整個視頻；

meta - 當頁面加載后只載入元數據；

none - 當頁面加載后不載入視頻；

標簽用法

1. 檢測瀏覽器是否支持標簽

標簽和標簽一樣，都可以放置提示文本“當前瀏覽器不支持video標簽”，演示代碼如下：當前瀏覽器不支持video標簽

如果當前瀏覽器不支持標簽，就會顯示提示文本“當前瀏覽器不支持video標簽”，如果沒有顯示提示本文，則是支持的。

2、標簽屬性設置

標簽的屬性用法基本上和標簽的屬性用法一樣，但標簽可以設置高度和寬度，以及設置視頻封面的poster屬性

A、設置視頻資源寬度和高度

在標簽中，我們可以設置播放視頻的高度和寬度，演示代碼如下：當前瀏覽器不支持video標簽?

width="600"是設置寬度為600px，height="325"是設置高度為325px，高寬尺寸的單位默認是px，單位還可以設置成cm、em、pt、%(百分比)等；

B、設置視頻封面；

視頻封面，就是視頻還沒有播放時顯示的圖片當前瀏覽器不支持video標簽

C、設置自動播放視頻當前瀏覽器不支持video標簽

D、設置有播放、暫停、音量控件的視頻當前瀏覽器不支持video標簽

E、設置視頻循環播放當前瀏覽器不支持video標簽

F、設置視頻自動緩沖當前瀏覽器不支持video標簽

注意：如果使用了autoplay屬性的話，那么，autobuffer屬性將會失效。

G、多個?標簽屬性配合使用

我們可以在?標簽內，同時使用多個屬性，比如，設置視頻可以自動循環播放的同時，還帶有控制視頻暫停/播放的控件，演示代碼如下：當前瀏覽器不支持video標簽

3、使用標簽設置多個視頻資源

我們可以在標簽內放入多個?標簽， 就可以鏈接多個不同的視頻資源文件，瀏覽器將根據標簽的先后順序進行判斷，優先選擇最先支持的視頻格式。

當前瀏覽器不支持?video?標簽

在標簽內使用?標簽插入相同視頻的多個不同格式，這樣就可以讓不同的瀏覽器自動判斷選擇自己支持的視頻格式，判斷順序是按照從上到下的順序，直到瀏覽器選擇自己支持的播放格式為止！

4、使用 標簽設置帶有字幕的視頻

下面，設置一個帶有兩個字幕軌道的視頻，演示代碼如下：

標簽可以為標簽之類的媒體資源規定字幕文件，或其他的外部文本文件，當媒體資源播放時，這些文本是可見的。

一個video標簽可以包含多個標簽 。

5、video標簽的瀏覽器兼容性問題

不同的瀏覽器可能支持的視頻格式有所不同，但為了兼容更加的廣泛，我們可以參看下面的代碼實現更加優良的兼容性：

當前瀏覽器不支持video標簽，你可以下載該視頻

以上代碼僅供參考學習，隨著html5應用越來越成熟，瀏覽器對video標簽的兼容性也會越來越好，但為了照顧更早版本的瀏覽器，也有必要考慮盡量能兼容以前的版本！

總結

以上是生活随笔為你收集整理的html video添加字幕,HTML5标签：video元素的使用方法及作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。