2.3 media 相關標籤
<picture>
例:透過 media query 顯示不同的圖
透過 media 屬性,指定螢幕寬度 768px 以上,呈現一張圖。
透過 media 屬性,指定螢幕寬度 500px 以下,呈現另一張圖。
如果瀏覽器不支援
<picture>
標籤或不在以上的範圍中,那就顯示 img 所指定的圖。
<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
<audio>
使用範例
controls
:顯示控制列。
controlsList="nodownload noplaybackrate"
:關閉下載按鈕、關閉播放速度的控制。
loop
:自動重播。
<source>
:提供不同格式的聲音檔,主要是讓瀏覽器從上至下,依序選擇可以播放的格式,一般建議主要是 mp3、ogg(或 ogv)。
網頁上常見的音訊 type
類型設定:
audio/mpeg
audio/ogg
Last updated