2.3 media 相關標籤

<picture>

例：透過 media query 顯示不同的圖

• 透過 media 屬性，指定螢幕寬度 768px 以上，呈現一張圖。

• 透過 media 屬性，指定螢幕寬度 500px 以下，呈現另一張圖。

• 如果瀏覽器不支援 <picture> 標籤或不在以上的範圍中，那就顯示 img 所指定的圖。

<picture>
  <source media="(min-width: 768px)" srcset="https://picsum.photos/seed/picsum/300/200">
  <source media="(max-width: 500px)" srcset="https://picsum.photos/id/10/300/200">
  <img src="https://picsum.photos/id/1000/300/200">
</picture>

參考 HTML <picture> Tag。

<video>

使用範例

controls：顯示控制項列表。

autoplay：自動播放，但還要加上 muted 屬性才會有效。

disablePictureInPicture：關閉子母畫面。

controlsList="nodownload noplaybackrate nofullscreen"：關閉下載按鈕、關閉播放速度的控制、關閉全螢幕按鈕。

poster：影片未播放時，顯示一張指定的圖片。

loop：影片播放結束後，自動重播。

muted：靜音。

playsinline：針對行動裝置，若想要影片能夠自動播放，還要再加上這個屬性才行。

<source> 標籤：提供不同格式的影片，主要是讓瀏覽器從上至下，依序選擇可以播放的格式，一般建議主要是 mp4、ogg(或 ogv)、webm。

網頁上常見的影片 type 類型設定：

• video/mp4

• video/ogg

• video/webm

<video controls autoplay disablePictureInPicture controlsList="nodownload" poster="https://picsum.photos/id/406/500/300" muted loop> 
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
</video>

<audio>

使用範例

controls：顯示控制列。

controlsList="nodownload noplaybackrate"：關閉下載按鈕、關閉播放速度的控制。

loop：自動重播。

<source>：提供不同格式的聲音檔，主要是讓瀏覽器從上至下，依序選擇可以播放的格式，一般建議主要是 mp3、ogg(或 ogv)。

網頁上常見的音訊 type 類型設定：

• audio/mpeg

• audio/ogg

<audio controls loop>
  <source src="https://www.w3schools.com/jsref/horse.mp3" type="audio/mpeg">
  <source src="https://www.w3schools.com/jsref/horse.ogg" type="audio/ogg">
</audio>

練習：

建立 audio.html，寫一個英文單字的聲音播放，完成的原始碼如下：