html video添加字幕,HTML5标签：video元素的使用方法及作用
html元素標(biāo)簽是html5中新增的標(biāo)簽，用于定義網(wǎng)頁文檔中的視頻資源文件，有關(guān)標(biāo)簽的使用方法及作用詳解如下：
標(biāo)簽的定義
標(biāo)簽可以把指定的視頻資源文件插入頁面中播放；
標(biāo)簽是 HTML 5 中新增的標(biāo)簽。
標(biāo)簽語法：?提示文本?
標(biāo)簽可以設(shè)置播放視頻的高度和寬度，默認(rèn)單位是px，而src屬性用來指定視頻資源的URL地址；
在和之間的“提示文本”，是用于當(dāng)前瀏覽器不支持標(biāo)簽時(shí)顯示的文本內(nèi)容；
標(biāo)簽支持的視頻格式
目前，標(biāo)簽支持以下三種視頻格式：
1、Ogg格式：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。
2、MP4格式：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG-4 文件。
3、WebM格式：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。
標(biāo)簽屬性屬性值描述
srcurl要播放的視頻 URL地址。
autoplayautoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controlscontrols如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
widthpixels設(shè)置視頻播放器的寬度。
heightpixels設(shè)置視頻播放器的高度。
looploop如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。
mutedmuted如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。
autobufferautobuffer設(shè)置視頻緩沖
posterURL規(guī)定視頻正在下載時(shí)顯示的圖像，直到用戶點(diǎn)擊播放按鈕。
preloadauto
metadata
none如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。
auto - 當(dāng)頁面加載后載入整個(gè)視頻；
meta - 當(dāng)頁面加載后只載入元數(shù)據(jù)；
none - 當(dāng)頁面加載后不載入視頻；
標(biāo)簽用法
1. 檢測瀏覽器是否支持標(biāo)簽
標(biāo)簽和標(biāo)簽一樣，都可以放置提示文本“當(dāng)前瀏覽器不支持video標(biāo)簽”，演示代碼如下：當(dāng)前瀏覽器不支持video標(biāo)簽
如果當(dāng)前瀏覽器不支持標(biāo)簽，就會(huì)顯示提示文本“當(dāng)前瀏覽器不支持video標(biāo)簽”，如果沒有顯示提示本文，則是支持的。
2、標(biāo)簽屬性設(shè)置
標(biāo)簽的屬性用法基本上和標(biāo)簽的屬性用法一樣，但標(biāo)簽可以設(shè)置高度和寬度，以及設(shè)置視頻封面的poster屬性
A、設(shè)置視頻資源寬度和高度
在標(biāo)簽中，我們可以設(shè)置播放視頻的高度和寬度，演示代碼如下：當(dāng)前瀏覽器不支持video標(biāo)簽?
width="600"是設(shè)置寬度為600px，height="325"是設(shè)置高度為325px，高寬尺寸的單位默認(rèn)是px，單位還可以設(shè)置成cm、em、pt、%(百分比)等；
B、設(shè)置視頻封面；
視頻封面，就是視頻還沒有播放時(shí)顯示的圖片當(dāng)前瀏覽器不支持video標(biāo)簽
C、設(shè)置自動(dòng)播放視頻當(dāng)前瀏覽器不支持video標(biāo)簽
D、設(shè)置有播放、暫停、音量控件的視頻當(dāng)前瀏覽器不支持video標(biāo)簽
E、設(shè)置視頻循環(huán)播放當(dāng)前瀏覽器不支持video標(biāo)簽
F、設(shè)置視頻自動(dòng)緩沖當(dāng)前瀏覽器不支持video標(biāo)簽
注意：如果使用了autoplay屬性的話，那么，autobuffer屬性將會(huì)失效。
G、多個(gè)?標(biāo)簽屬性配合使用
我們可以在?標(biāo)簽內(nèi)，同時(shí)使用多個(gè)屬性，比如，設(shè)置視頻可以自動(dòng)循環(huán)播放的同時(shí)，還帶有控制視頻暫停/播放的控件，演示代碼如下：當(dāng)前瀏覽器不支持video標(biāo)簽
3、使用標(biāo)簽設(shè)置多個(gè)視頻資源
我們可以在標(biāo)簽內(nèi)放入多個(gè)?標(biāo)簽， 就可以鏈接多個(gè)不同的視頻資源文件，瀏覽器將根據(jù)標(biāo)簽的先后順序進(jìn)行判斷，優(yōu)先選擇最先支持的視頻格式。
當(dāng)前瀏覽器不支持?video?標(biāo)簽
在標(biāo)簽內(nèi)使用?標(biāo)簽插入相同視頻的多個(gè)不同格式，這樣就可以讓不同的瀏覽器自動(dòng)判斷選擇自己支持的視頻格式，判斷順序是按照從上到下的順序，直到瀏覽器選擇自己支持的播放格式為止！
4、使用 標(biāo)簽設(shè)置帶有字幕的視頻
下面，設(shè)置一個(gè)帶有兩個(gè)字幕軌道的視頻，演示代碼如下：
標(biāo)簽可以為標(biāo)簽之類的媒體資源規(guī)定字幕文件，或其他的外部文本文件，當(dāng)媒體資源播放時(shí)，這些文本是可見的。
一個(gè)video標(biāo)簽可以包含多個(gè)標(biāo)簽 。
5、video標(biāo)簽的瀏覽器兼容性問題
不同的瀏覽器可能支持的視頻格式有所不同，但為了兼容更加的廣泛，我們可以參看下面的代碼實(shí)現(xiàn)更加優(yōu)良的兼容性：
當(dāng)前瀏覽器不支持video標(biāo)簽，你可以下載該視頻
以上代碼僅供參考學(xué)習(xí)，隨著html5應(yīng)用越來越成熟，瀏覽器對(duì)video標(biāo)簽的兼容性也會(huì)越來越好，但為了照顧更早版本的瀏覽器，也有必要考慮盡量能兼容以前的版本！
總結(jié)
以上是生活随笔為你收集整理的html video添加字幕,HTML5标签：video元素的使用方法及作用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux（四）——CROND和磁盘分区
- 下一篇： 2017年html5行业报告,云适配发布