H5如何嵌入音頻和視頻？[web前端培訓]

HTML5中嵌入視頻

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

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

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

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

HTML5中嵌入音頻方法

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

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

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

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

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

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

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

從上面可以看出，對于HTML視頻格式，只有 Chrome瀏覽器完全支持，但對于HTML5音頻格式，各瀏覽器都會有一些不兼容的音頻格式。為了使視頻、音頻能夠在各個瀏覽器中正常播放，往往需要提供多種格式的音視頻文件供瀏覽器選擇。

在HTML5中，運用 source標記可以為 video標記或 audio標記提供多個備用文件。運用source標記添加音頻的基本語法格式如下：

<audio controls="controls">

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

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

                   ...

</audio>

在上面的語法格式中，可以指定多個source標記為瀏覽器提供備用的音頻文件。source標記一般設置兩個屬性一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格式的音頻文件，因此在網頁中嵌入音頻文件時，需要通過source標記指定一個wav格式的音頻文件，使音頻文件能夠在Firefox 4.0中正常播放。

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

<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>

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

更多web前端技術請關注傳智播客前端與移動開發(fā)學院。