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

瀏覽器不兼容發(fā)布的音視頻文件怎么辦?

更新時(shí)間:2021-06-11 來源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


雖然HTML5支持ogg、mpeg4和webm的視頻格式以及ogg、mp3和wav的音頻格式,但并不是所有的瀏覽器都支持這些格式,因此我們?cè)谇度胍曨l音頻文件格式時(shí),就要考慮瀏覽器的兼容性問題。表1列舉了各瀏覽器對(duì)音、視頻文件格式的兼容情況。


表1 瀏覽器支持的視頻音頻格式

1623379317498_1.png


從表1我們可以看出,除了mpeg4和mp3格式外,各瀏覽器都會(huì)有一些不兼容的音頻格式。為了保證不同格式的視頻、音頻能夠在各個(gè)瀏覽器中正常播放,我們往往需要提供多種格式的音視頻文件共瀏覽器選擇。

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

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

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

    ……

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

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

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

例如,將mp3格式和wav格式同時(shí)嵌入到頁面中,示例代碼如下所示。

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

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

</audio>


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

<video controls="controls">

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

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

    ……

</video>


例如,將mp4格式和ogg格式同時(shí)嵌入到頁面中,可以書寫如下示例代碼:、

<video controls="controls">

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

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

</video>


注意:

1.Safari瀏覽器對(duì)于wav音頻格式和mp4視頻格式的支持,需要把頁面部署到web服務(wù)器里面。如果只是單純的用Safari瀏覽器打開本地的一個(gè)靜態(tài)頁面,則瀏覽器不支持這兩種格式。

2.Opera瀏覽器同樣需要把頁面部署到web服務(wù)器上,才能支持ogg視頻文件格式。





猜你喜歡:

HTML5的離線存儲(chǔ)怎么使用,工作原理是什么?

HTML5中怎樣嵌入視頻和音頻?

HTML5頁面頭部信息相關(guān)標(biāo)簽是如何編輯的?

離線存儲(chǔ)怎么使用,工作原理是什么?

黑馬程序員前端與移動(dòng)開發(fā)課程

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!