瀏覽器不兼容嵌入的音視頻文件怎么辦？

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

從表1我們可以看出，除了mpeg4和mp3格式外，各瀏覽器都會有一些不兼容的音頻格式。為了保證不同格式的視頻、音頻能夠在各個(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，對它們的具體介紹如下。

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

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

猜你喜歡：

HTML5怎樣直接調(diào)用網(wǎng)絡(luò)音頻視頻文件？

哪些瀏覽器支持HTML5？【web前端培訓(xùn)】

HTML5支持的視頻文件格式和音頻文件格式有哪些？

傳智教育前端與移動(dòng)開發(fā)開發(fā)培訓(xùn)