2.3 media 相關標籤
Last updated
Last updated
透過 media 屬性，指定螢幕寬度 768px 以上，呈現一張圖。
透過 media 屬性，指定螢幕寬度 500px 以下，呈現另一張圖。
如果瀏覽器不支援 <picture> 標籤或不在以上的範圍中，那就顯示 img 所指定的圖。
controls：顯示控制項列表。
autoplay：自動播放，但還要加上 muted 屬性才會有效。
disablePictureInPicture：關閉子母畫面。
controlsList="nodownload noplaybackrate nofullscreen"：關閉下載按鈕、關閉播放速度的控制、關閉全螢幕按鈕。
poster：影片未播放時，顯示一張指定的圖片。
loop：影片播放結束後，自動重播。
muted：靜音。
playsinline：針對行動裝置，若想要影片能夠自動播放，還要再加上這個屬性才行。
<source> 標籤：提供不同格式的影片，主要是讓瀏覽器從上至下，依序選擇可以播放的格式，一般建議主要是 mp4、ogg(或 ogv)、webm。
網頁上常見的影片 type 類型設定：
video/mp4
video/ogg
video/webm
controls：顯示控制列。
controlsList="nodownload noplaybackrate"：關閉下載按鈕、關閉播放速度的控制。
loop：自動重播。
<source>：提供不同格式的聲音檔，主要是讓瀏覽器從上至下，依序選擇可以播放的格式，一般建議主要是 mp3、ogg(或 ogv)。
網頁上常見的音訊 type 類型設定：
audio/mpeg
audio/ogg
練習：
建立 audio.html，寫一個英文單字的聲音播放，完成的原始碼如下：