一、HTML5 多媒體標(biāo)簽
傳統(tǒng) HTML 開發(fā)中 , 如果想要向網(wǎng)頁中嵌入音頻和視頻 , 需要 使用 Flash 瀏覽器插件才能實現(xiàn) ;
在 HTML5 中 , 使用 多媒體標(biāo)簽 , 即可實現(xiàn)向瀏覽器中插入音視頻 , 多媒體標(biāo)簽如下 :
-
音頻標(biāo)簽 :
<audio> -
視頻標(biāo)簽 :
<video>
二、音頻標(biāo)簽
HTML 5 的 <audio> 音頻標(biāo)簽 , 支持 ogg / mp3 / wav 三種格式的音頻 , 不同的瀏覽器支持的音頻格式不同 ;
- IE9 : mp3 ;
- Firefox 3.5 : ogg / wav ;
- Opera 10.5 : ogg / wav ;
- Chrome 3.0 : ogg / mp3 ;
- Safari 3.0 : mp3 / wav ;
可以在 <audio> 音頻標(biāo)簽 中 放 ogg 和 mp3 兩種格式的標(biāo)簽 , 所有的瀏覽器都可以播放音頻 ;
audio 標(biāo)簽常用屬性 :
-
src 屬性 : 設(shè)置 url 值 , 要播放的音頻路徑 ;
-
autoplay 屬性 : 值為 autoplay , 表示音頻文件加載就緒后 , 馬上播放 ;
- Chrome 瀏覽器不能自動播放 ;
- IE 等其它瀏覽器可以自動播放 ;
-
controls 屬性 : 值為 controls , 在網(wǎng)頁中顯示操作控件 , 如 : 播放 / 暫停 / 停止 / 進(jìn)度條 / 音量控制 等按鈕 ;
- 不同的播放器 , 顯示的操作空間是不同的 , 風(fēng)格無法做到統(tǒng)一 ;
- 不同的播放器 , 顯示的操作空間是不同的 , 風(fēng)格無法做到統(tǒng)一 ;
-
loop 屬性 : 值為 loop , 音頻循環(huán)播放 ;
- 設(shè)置
loop="loop"就會循環(huán)播放 ;
- 設(shè)置
三、音頻標(biāo)簽代碼示例 ( 默認(rèn)操作 )
代碼示例 :文章來源：http://www.zghlxwxcb.cn/news/detail-618538.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 多媒體標(biāo)簽 - 音頻標(biāo)簽示例</title>
<style>
</style>
</head>
<body>
<audio src="media/snow.mp3" controls="controls"></audio>
</body>
</html>
顯示效果 :
-
進(jìn)入后默認(rèn)樣式 :
- 點擊播放后 , 標(biāo)簽右側(cè)顯示播放圖標(biāo) :
四、音頻標(biāo)簽代碼示例 ( 插入 mp3 / ogg 兩種格式的音頻 )
瀏覽器加載頁面 , 發(fā)現(xiàn) audio 標(biāo)簽 , 讀取該 audio 標(biāo)簽 , 發(fā)現(xiàn)
- 第一個 source 字標(biāo)簽 配置 mp3 音頻文件 ;
- 如果瀏覽器支持 mp3 就播放該 mp3 文件 ;
- 如果不支持 mp3 格式 , 則繼續(xù)讀取下一行 ;
- 第二個 source 標(biāo)簽 配置的是 ogg 格式的音頻文件 ;
- 如果瀏覽器支持 ogg 就播放該 ogg 文件 ;
- 如果不支持 ogg 格式 , 則繼續(xù)讀取下一行 ;
- 第三個 source 標(biāo)簽 配置的是 wav 格式的音頻文件 ;
- 如果瀏覽器支持 wav 就播放該 wav 文件 ;
- 如果不支持 wav 格式 , 則繼續(xù)讀取下一行 , 顯示提示信息 ;
如果瀏覽器的版本太低 , 如 IE 6 / 7 / 8 , 則顯示 很抱歉 , 當(dāng)前瀏覽器不支持現(xiàn)有音頻格式 ~ ;
代碼示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 多媒體標(biāo)簽 - 音頻標(biāo)簽示例</title>
<style>
</style>
</head>
<body>
<!-- 瀏覽器加載頁面 , 發(fā)現(xiàn) audio 標(biāo)簽
讀取該 audio 標(biāo)簽 , 發(fā)現(xiàn)第一個 source 字標(biāo)簽 , 該標(biāo)簽配置 mp3 音頻文件
- 如果瀏覽器支持 mp3 就播放該 mp3 文件
- 如果不支持 mp3 格式 , 則繼續(xù)讀取下一行
第二個 source 標(biāo)簽配置的是 ogg 格式的音頻文件
- 如果瀏覽器支持 ogg 就播放該 ogg 文件
- 如果不支持 ogg 格式 , 則繼續(xù)讀取下一行
第二個 source 標(biāo)簽配置的是 wav 格式的音頻文件
- 如果瀏覽器支持 wav 就播放該 wav 文件
- 如果不支持 wav 格式 , 則繼續(xù)讀取下一行 , 顯示提示信息 -->
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg" />
<source src="media/snow.ogg" type="audio/ogg" />
<source src="media/snow.wav" type="audio/wav" />
很抱歉 , 當(dāng)前瀏覽器不支持現(xiàn)有音頻格式 ~
</audio>
</body>
</html>
顯示效果 :文章來源地址http://www.zghlxwxcb.cn/news/detail-618538.html
-
進(jìn)入后默認(rèn)樣式 :
- 點擊播放后 , 標(biāo)簽右側(cè)顯示播放圖標(biāo) :
到了這里，關(guān)于【HTML5】HTML5 多媒體標(biāo)簽 ① ( audio 音頻標(biāo)簽 | 音頻標(biāo)簽常見屬性值設(shè)置 | 音頻標(biāo)簽?zāi)J(rèn)代碼設(shè)置 | 音頻標(biāo)簽設(shè)置多種類型音頻文件 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[前端筆記——多媒體與嵌入] 6.HTML 中的圖片+視頻+音頻內(nèi)容](https://imgs.yssmx.com/Uploads/2024/02/425174-1.png)
![[HTML]Web前端開發(fā)技術(shù)4（HTML5、CSS3、JavaScript ）圖像與多媒體文件hspace，vspace，scrollamount，bgcolor，marquee——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/753534-1.png)
