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

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

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

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

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

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

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

    ……

</audio>

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

● type：指定媒體文件的類(lèi)型和格式。其中類(lèi)型可以為“video”或“audio”，格式為視頻或音頻文件的格式類(lèi)型。

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

<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)簽即可，其語(yǔ)法格式如下：

<video controls="controls">

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

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

    ……

</video>

例如，將mp4格式和ogg格式同時(shí)嵌入到頁(yè)面中，可以書(shū)寫(xiě)如下示例代碼：、

<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視頻格式的支持，需要把頁(yè)面部署到web服務(wù)器里面。如果只是單純的用Safari瀏覽器打開(kāi)本地的一個(gè)靜態(tài)頁(yè)面，則瀏覽器不支持這兩種格式。

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

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

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

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

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

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