音頻

audio標(biāo)簽

我們通常用audio標(biāo)簽來(lái)向頁(yè)面中引入一個(gè)外部的音頻文件。
音視頻文件引入時(shí)，默認(rèn)情況下不允許用戶自己控制播放停止。

屬性

controls

controls指定是否允許用戶控制播放。
這個(gè)屬性不是通過(guò)值來(lái)判斷的，而是通過(guò)有沒(méi)有，有這個(gè)屬性就是允許，沒(méi)有就是不允許。

autoplay

autoplay指定音頻文件是否自動(dòng)播放。
如果設(shè)置了autoplay，則音樂(lè)在打開頁(yè)面時(shí)會(huì)自動(dòng)播放。但是目前來(lái)講，大部分瀏覽器都不會(huì)自動(dòng)對(duì)音樂(lè)進(jìn)行播放。

loop

loop指定音樂(lè)是否循環(huán)播放。
如果設(shè)置了loop，則音樂(lè)會(huì)循環(huán)播放。

使用方式

<audio src="./source/audio.mp3" controls autoplay loop></audio>

IE8及以下版本不支持audio標(biāo)簽，展示效果為控制臺(tái)報(bào)錯(cuò)，界面看不出來(lái)有audio標(biāo)簽。

提示用戶升級(jí)瀏覽器

除了通過(guò)src屬性來(lái)指定外部文件的路徑以外，還可以通過(guò)source來(lái)指定文件。所以還可以寫成：

<audio controls>
    <source src="./source/audio.mp3">
</audio>

但是此時(shí)，用戶看到的效果和直接使用

<audio src="./source/audio.mp3" controls></audio>

是一樣的，那么我們需要提示用戶，這里是有音頻播放的，因?yàn)闉g覽器版本問(wèn)題，導(dǎo)致音頻播放功能無(wú)法使用?？梢詫懗桑?/p>

<audio controls>
    對(duì)不起，您的瀏覽器不支持播放音頻！請(qǐng)升級(jí)瀏覽器！
    <source src="./source/audio.mp3">
</audio>

如果瀏覽器支持audio標(biāo)簽，則會(huì)自動(dòng)去找audio標(biāo)簽中的source，如果瀏覽器不支持audio標(biāo)簽，即瀏覽器識(shí)別不出audio標(biāo)簽和source標(biāo)簽，此時(shí)界面會(huì)現(xiàn)時(shí)“對(duì)不起xxx”這段文字。

瀏覽器不支持MP3格式

有些瀏覽器不支持mp3格式，而是支持ogg格式，所以以前為了解決兼容性問(wèn)題，可以寫成：

<audio controls>
    對(duì)不起，您的瀏覽器不支持播放音頻！請(qǐng)升級(jí)瀏覽器！
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
</audio>

這樣，瀏覽器會(huì)先識(shí)別第一個(gè)source，識(shí)別不了mp3格式時(shí)，會(huì)去識(shí)別第二個(gè)sourse，如果可以識(shí)別ogg格式文件，就會(huì)播放對(duì)應(yīng)的音頻文件，如果仍然識(shí)別不了，才會(huì)顯示“對(duì)不起xxx”這段文字。

兼容低版本瀏覽器（embed標(biāo)簽）

在老版本瀏覽器中其實(shí)是可以引入音頻文件的（如IE8），只是體驗(yàn)不好，所以現(xiàn)在用到的不多：

<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

如果想兼容一些較低版本的瀏覽器，但是較高版本瀏覽器又希望用audio標(biāo)簽，那么可以通過(guò)以下方式實(shí)現(xiàn)：

<audio controls>
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

視頻

vidio標(biāo)簽

我們通常用video標(biāo)簽來(lái)向網(wǎng)頁(yè)中引入一個(gè)視頻。
使用方式和audio基本上是一樣的。

兼容后的寫法

<video controls>
    <source src="./source/video.webm">
    <source src="./source/video.mp4">
    <embed src="./source/video.mp3" type="audio/mp4">
</video>

其他事項(xiàng)說(shuō)明

目前我們的例子，全部都是用的本地文件，所以用的都是相對(duì)路徑。實(shí)際項(xiàng)目中，我們通常不會(huì)把音視頻文件直接放在我們的服務(wù)器中，而是會(huì)購(gòu)買一些第三方產(chǎn)品，把音視頻文件放在那個(gè)服務(wù)器上，然后把路徑引入過(guò)來(lái)。

還有一種方式：把我們的視頻上傳到一些如騰訊視頻等服務(wù)器上，然后選擇分享中的“復(fù)制通用代碼”，把對(duì)應(yīng)代碼放在頁(yè)面上，相當(dāng)于是在頁(yè)面上引入了一個(gè)騰訊視頻的頁(yè)面，訪問(wèn)的是騰訊的服務(wù)器，對(duì)我們的服務(wù)器就沒(méi)有太大壓力（引入方式是iframe標(biāo)簽）。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-412099.html

到了這里，關(guān)于【HTML】音視頻標(biāo)簽（audio、video、embed）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！