html video添加字幕,HTML5标签:video元素的使用方法及作用
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元素的使用方法及作用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux(四)——CROND和磁盘分区
- 下一篇: 超兔指纹浏览器(TO12345)是什么?