首頁技術(shù)文章正文

H5如何嵌入視頻?[web前端開發(fā)]

更新時間:2019-12-05 來源:黑馬程序員 瀏覽量:

HTML5中嵌入視頻

在HTML5中, video標(biāo)記用于定義視頻文件,它支持三種視頻格式,分別為ogg、webm和mpeg4。使用vide記嵌入視頻的基本語法格式如下:

<video src="視頻文件路徑" controls="controls"></video>

在上面的語法格式中,src屬性用于設(shè)置視頻文件的路徑, controls屬性用于控制是否顯示播放控件,這兩個屬性是 video標(biāo)記的基本屬性。值得一提的是,在< video>和</video>之間還可以插入文字,當(dāng)瀏覽器不支持 video標(biāo)記時,就會在瀏覽器中顯示該文字。

 

在video標(biāo)記中還可以添加其他屬性,進(jìn)一步優(yōu)化視頻的播放效果,如下所示:


屬性描述
autoplayautoplay當(dāng)頁面載入頁面完成后,自動播放。
looploop視頻結(jié)束時重新開始播放
preloadpreload如果出現(xiàn)該屬性,則視頻在頁面加載時進(jìn)行加載,預(yù)備播放。
如果使用autoplay,則忽略該屬性。
posterurl當(dāng)視頻緩沖不足時,該屬性值鏈接一個圖像,并將該圖像按
照比例顯示出來。


HTML5中嵌入音頻方法

在HTML5中,audio標(biāo)記用于定義音頻文件,它支持三種音頻格式,分別為ogg、mp3和wav。使用 audio標(biāo)記嵌入音頻文件的基本語法格式如下:

< audio src="音頻文件路徑" controls=" controls"></ audio>

從上面的基本語法格式可以看出,audio標(biāo)記的語法格式和 video標(biāo)記類似,在 audio標(biāo)記的語法中src屬性用于設(shè)置音頻文件的路徑,controls屬性用于為音頻提供播放控件。在< audio>和< /audio>之間同樣可以插入文字,當(dāng)瀏覽器不支持 audio標(biāo)記時,就會在瀏覽器

中顯示該文字。

需要注意的是,在audio標(biāo)記中還可以添加其他屬性,在進(jìn)一步優(yōu)化音頻播放效果。

屬性描述
autoplayautoplay當(dāng)頁面載入頁面完成后自動播放音頻
looploop音頻結(jié)束時重新開始播放
preloadpreload如果出現(xiàn)該屬性,則音頻在頁面加載時進(jìn)行加載,預(yù)備播放。如果使用
“autoplay”屬性,則忽略該屬性,瀏覽器會忽略preload屬性。

上面我們列舉了audio標(biāo)記的屬性和video標(biāo)記是相同的,這些相同的屬性在嵌入音視頻時是通用的。


視頻和音頻文件的兼容性問題

雖然HTML5支持ogg、mpeg4和webm的音頻格式,但是并不是所有的瀏覽器都支持這些格式,因此在嵌入視頻和音頻文件格式時,需要考慮瀏覽器的兼容問題。下面我們列舉了各瀏覽器對視頻和音頻文件的兼容情況。

1575538743546_H5對音視頻的支持.jpg

從上面可以看出,對于HTML視頻格式,只有 Chrome瀏覽器完全支持,但對于HTML5音頻格式,各瀏覽器都會有一些不兼容的音頻格式。為了使視頻、音頻能夠在各個瀏覽器中正常播放,往往需要提供多種格式的音視頻文件供瀏覽器選擇。推薦了解web前端培訓(xùn)課程。

在HTML5中,運用 source標(biāo)記可以為 video標(biāo)記或 audio標(biāo)記提供多個備用文件。運用source標(biāo)記添加音頻的基本語法格式如下:


<audio controls="controls">
                   <source src="音頻文件地址" type="媒體文件類型/格式">
                   <source src="音頻文件地址" type="媒體文件類型/格式">
                   ...
</audio>

在上面的語法格式中,可以指定多個source標(biāo)記為瀏覽器提供備用的音頻文件。source標(biāo)記一般設(shè)置兩個屬性一src和type,對它們的具體介紹如下:

src:用于指定媒體文件的URL地址。

Type:指定媒體文件的類型和格式。其中類型可以為video或audio,格式為視頻和音頻文件的格式類型。

例如,想要為頁面添加一個在Firefox 4.0和Chrome 6.0中都可以正常播放的音頻文件,示例代碼如下:

<audio controls="controls">
                   <source src="music/1.mp3" type="audio/mp3">
                   <source src="music/1.wav" type="audio/wav">
</audio>

在上面的示例代碼中,由于Firefox 4.0不支持mp3格式的音頻文件,因此在網(wǎng)頁中嵌入音頻文件時,需要通過source標(biāo)記指定一個wav格式的音頻文件,使音頻文件能夠在Firefox 4.0中正常播放。

source標(biāo)記添加視頻的方法和添加音頻的方法基本相同,只需要把 audio標(biāo)記換成video標(biāo)記即可,其語法格式如下:

<video controls="controls">
                   <source src="視頻文件地址" type="媒體文件類型/格式">
                   <source src="視頻文件地址" type="媒體文件類型/格式">
                   ...
</video>


例如,為頁面添加在Firefox 4.0 和 IE9中都可以正常播放的視頻文件,可以書寫如下代碼:

<video controls="controls">
                   <source src="video/1.ogg" type="video/ogg">
                   <source src="video/1.mp4" type="vidoe/mp4">
</video>

在上面的實例代碼中,F(xiàn)irefox 4.0支持ogg格式的視頻文件,IE9支持MP4格式的視頻文件。


猜你喜歡:

HTML5新增form屬性有哪些功能?示例代碼是什么?

html5六大結(jié)構(gòu)元素介紹

前端HTML5基本格式

HTML5中figure標(biāo)簽的作用

黑馬程序員web前端培訓(xùn)

分享到:
在線咨詢 我要報名
和我們在線交談!