學(xué)習(xí)日記-HTML5-3

2024-04-27 15:15:50

字體：大中小

供稿：網(wǎng)友

HTML5中音頻與視頻標(biāo)簽-audio

<!doctype html><meta charset="utf-8"><audio>你的瀏覽器不支持audio標(biāo)簽</audio>

這樣可以測(cè)試，該瀏覽器是否支持，如果看到字說(shuō)明不支持。正式寫法為：(test.mp3此音頻文件是測(cè)試用，需自行準(zhǔn)備，放在與所編輯頁(yè)面相同的文件夾里)

<audio src="test.mp3" autoplay>你的瀏覽器不支持audio標(biāo)簽</audio>

在這里面會(huì)發(fā)現(xiàn)沒(méi)有可以對(duì)音樂(lè)操作的按鈕，其中autoplay是自動(dòng)播放，這里音樂(lè)只能用于背景音樂(lè)。所以需要 controls 屬性，出現(xiàn)生成一個(gè)用于控制的播放器。

<audio src="test.mp3" controls autoplay>你的瀏覽器不支持audio標(biāo)簽</audio>

如果想要循環(huán)播放則需要使用到loop屬性。

<audio src="test.mp3" controls autoplay loop>你的瀏覽器不支持audio標(biāo)簽</audio>

各個(gè)瀏覽器支持的格式見(jiàn)表：

瀏覽器	MP3	Wav	Ogg
Internet Explorer	Y	N	N
Chrome	Y	Y	Y
Firefox	Y	Y	Y
Safari	Y	Y	N
Opera	Y	Y	Y

為了適配各個(gè)瀏覽器，可以用source列出各個(gè)資源，讓瀏覽器遍歷識(shí)別。

<audio controls autoplay loop> <source src="test.mp3" type="audio/mp3"> <source src="test.ogg" type="audio/ogg"> <source src="test.wav" type="audio/wav"> 你的瀏覽器不支持audio標(biāo)簽</audio><br>

各個(gè)瀏覽器對(duì)于視頻格式支持見(jiàn)表：

瀏覽器	MP4	WebM	Ogg
Internet Explorer	Y	N	N
Chrome	Y	Y	Y
Firefox	Y 從 Firefox 21 版本開(kāi)始,linux 系統(tǒng)從 Firefox 30 開(kāi)始	Y	Y
Safari	Y	N	N
Opera	Y 從 Opera 25 版本開(kāi)始	Y	Y

視頻-同音頻一樣，但多了width與height兩種屬性，用于設(shè)置播放窗口大小。

<video controls autoplay loop width="500" height="300"> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> <source src="test.ogg" type="video/ogg"> 你的瀏覽器不支持video標(biāo)簽</video><br>

如果想要靜音可以使用muted屬性

<video controls muted autoplay loop width="500" height="300"> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> <source src="test.ogg" type="video/ogg"> 你的瀏覽器不支持video標(biāo)簽</video><br>

而在視頻加載號(hào)之前，可使用poster屬性，設(shè)置下載時(shí)與播放前的圖片。值為URL

<video controls muted autoplay loop width="500" height="300" poster="test.jpg"> <source src="test.mp4" type="video/mp4"> <source src="test.webm" type="video/webm"> <source src="test.ogg" type="video/ogg"> 你的瀏覽器不支持video標(biāo)簽</video><br>

video標(biāo)簽的各種屬性表如下：

屬性	值	描述
controls	controls	如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開(kāi)始播放。
autoplay	autoplay	如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
PReload	auto，metadata，none	如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 “autoplay”，則忽略該屬性。
muted	muted	如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。
poster	URL	規(guī)定視頻正在下載時(shí)顯示的圖像，直到用戶點(diǎn)擊播放按鈕。
src	URL	要播放的視頻的 URL。
height	pixels	設(shè)置視頻播放器的高度。
width	pixels	設(shè)置視頻播放器的寬度。