學習日記-HTML5-3

2024-04-27 15:15:50

字體：大中小

來源：轉載

供稿：網友

HTML5中音頻與視頻標簽-audio

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

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

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

在這里面會發現沒有可以對音樂操作的按鈕，其中autoplay是自動播放，這里音樂只能用于背景音樂。所以需要 controls 屬性，出現生成一個用于控制的播放器。

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

如果想要循環播放則需要使用到loop屬性。

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

各個瀏覽器支持的格式見表：

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

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

<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標簽</audio><br>

各個瀏覽器對于視頻格式支持見表：

瀏覽器	MP4	WebM	Ogg
Internet Explorer	Y	N	N
Chrome	Y	Y	Y
Firefox	Y 從 Firefox 21 版本開始,linux 系統從 Firefox 30 開始	Y	Y
Safari	Y	N	N
Opera	Y 從 Opera 25 版本開始	Y	Y

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

<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標簽</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標簽</video><br>

而在視頻加載號之前，可使用poster屬性，設置下載時與播放前的圖片。值為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標簽</video><br>

video標簽的各種屬性表如下：

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