網頁的多媒體

網頁的多媒體

Written by Wanding on 16 August 2020
HTML5針對多媒體的功能新增了<audio>和<video>這兩個重要標籤。在過去需要靠Flash才能播放在瀏覽器上播放影音， 如今已經不需要flash了。因為瀏覽器就可以用兩個標籤進型網頁的聲音和影片播放。

 

<audio>和<video>支援多媒體的播放，但是並非所有的檔案格式都支援。以下為個別支援的影音格式：
種類 AUDIO VIDEO
檔案格式 MP3 MP4
Wav WebM
Ogg Ogg

影片的寫法<video>

<video src="影片檔案位置" controls="true"></video>
影片常用的相關屬性：
  • 出現控制器：controls="true"
  • 開啟自動播放：autoplay="autoplay"
  • 開啟時靜音：muted="true (google考量使用者，規範預設靜音）
  • 循環播放：loop="true"
  • 禁止下載影片：controlslist="nodownload"
例如:<video src="/video/road.mp4" controls="true" autoplay muted="true"></video>，瀏覽器顯示如下

聲音的寫法<audio>

<audio src="聲音檔案位置" controls></audio>

 

聲音的寫法一定要加上controls，否則螢幕上會呈現空白，什麼都沒有
例如：<audio src="/audio/greek.mp3" controls></audio>，瀏覽器顯示如下

回目錄頁