H5如何嵌入音頻和視頻？[web前端培訓(xùn)]

HTML5中嵌入視頻

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

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

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

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

HTML5中嵌入音頻方法

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

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

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

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

上面我們列舉了audio標(biāo)記的屬性和video標(biāo)記是相同的，這些相同的屬性在嵌入音視頻時(shí)是通用的。推薦了解web前端培訓(xùn)課程。

視頻和音頻文件的兼容性問(wèn)題

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

從上面可以看出，對(duì)于HTML視頻格式，只有 Chrome瀏覽器完全支持，但對(duì)于HTML5音頻格式，各瀏覽器都會(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="媒體文件類型/格式">

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

                   ...

</audio>

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

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

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

例如，想要為頁(yè)面添加一個(gè)在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)頁(yè)中嵌入音頻文件時(shí)，需要通過(guò)source標(biāo)記指定一個(gè)wav格式的音頻文件，使音頻文件能夠在Firefox 4.0中正常播放。

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

<video controls="controls">

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

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

                   ...

</video>

例如，為頁(yè)面添加在Firefox 4.0 和 IE9中都可以正常播放的視頻文件，可以書(shū)寫(xiě)如下代碼：

<video controls="controls">

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

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

</video>

在上面的實(shí)例代碼中，Firefox 4.0支持ogg格式的視頻文件，IE9支持MP4格式的視頻文件。

更多web前端技術(shù)請(qǐng)關(guān)注傳智播客前端與移動(dòng)開(kāi)發(fā)學(xué)院。