傳智播客旗下品牌:|||||

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2019年12月05日17時30分 來源:傳智播客

HTML5中嵌入視頻

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

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

 

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

 

video標記中還可以添加其他屬性,進一步優化視頻的播放效果,如下所示:

屬性 描述
autoplay autoplay 當頁面載入頁面完成后,自動播放。
loop loop 視頻結束時重新開始播放
preload preload 如果出現該屬性,則視頻在頁面加載時進行加載,預備播放。
如果使用autoplay,則忽略該屬性。
poster url 當視頻緩沖不足時,該屬性值鏈接一個圖像,并將該圖像按
照比例顯示出來。


HTML5中嵌入音頻方法

HTML5中,audio標記用于定義音頻文件,它支持三種音頻格式,分別為oggmp3wav。使用 audio標記嵌入音頻文件的基本語法格式如下:

 

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

 

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


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

屬性 描述
autoplay autoplay 當頁面載入頁面完成后自動播放音頻
loop loop 音頻結束時重新開始播放
preload preload 如果出現該屬性,則音頻在頁面加載時進行加載,預備播放。如果使用
“autoplay”屬性,則忽略該屬性,瀏覽器會忽略preload屬性。


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

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

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

 瀏覽器對視頻和音頻的兼容性

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

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

<audio controls="controls">

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

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

                   ...

</audio>

 

在上面的語法格式中,可以指定多個source標記為瀏覽器提供備用的音頻文件。source標記一般設置兩個屬性一srctype,對它們的具體介紹如下:

 

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

Type:指定媒體文件的類型和格式。其中類型可以為videoaudio,格式為視頻和音頻文件的格式類型。

 

例如,想要為頁面添加一個在Firefox 4.0Chrome 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前端技術請關注傳智播客前端與移動開發學院。

智慧彩票投注 贵州快3走势 上海时时乐 2019网赚游戏 网赚论坛排行榜 快发彩票投注 2019年调查网赚 2019年捞金网赚 19年网赚app 关于网赚知识技术