HTML5 <video> 與 <audio> 的屬性大全

在開始之前,先提醒一點:<video> 和 <audio> 元素的許多屬性是相通的,兩者同樣屬於媒體元素,因此以下屬性的說明若無特別註明,表示同樣適用於影片和音訊。接下來,讓我們從這兩個元素最基本的屬性開始,一步步打造出功能完善的媒體播放器。

任何影片或音訊元素的核心,都是透過 src 屬性指定媒體檔案的位置。src(source)屬性可接受一個 URL 或檔案路徑,瀏覽器會根據這個位置載入並播放對應的媒體檔案。例如,我們可以這樣插入一段音樂或影片:

上述程式碼中,我們利用 src 指向媒體檔案的位置,同時加入了 controls 屬性(後續章節將詳述)讓瀏覽器呈現播放控制介面。標籤中的文字(例如 您的瀏覽器不支援影片播放。)是後備內容,當使用者的瀏覽器無法識別 <video>/<audio> 元素時,會顯示這段文字或提供替代資訊。一般情況下,現代瀏覽器皆已支援這些元素,但保留後備內容有助於提升相容性與無障礙體驗。

值得注意的是,src 屬性並非唯一指定媒體來源的方法。HTML5 允許在 <video> 或 <audio> 元素內使用多個 <source> 子元素,每個 <source> 提供不同格式或版本的媒體檔案來源。瀏覽器將自動選擇第一個可支援播放的來源。當我們需要提供多種格式以因應不同瀏覽器的相容性時(稍後在介紹 type 屬性時詳述),<source> 元素會比單一的 src 更加靈活。

沒有介面的播放器就像一台沒有按鈕的錄放影機。controls 屬性是一個布林屬性(Boolean attribute),用於決定是否顯示瀏覽器預設的媒體播放控制介面。當我們在 <video> 或 <audio> 標籤中加入 controls,瀏覽器會自動提供一組控制項,例如播放/暫停按鈕、進度條、音量調整以及全螢幕切換(針對影片)等,方便使用者操作媒體。反之,如果沒有設置 controls,瀏覽器不會呈現任何內建控制介面。

在上述範例中,controls 的存在使得影片載入後即帶有瀏覽器內建的控制列。使用者可以直接點擊播放、暫停影片,調整音量或切換全螢幕(瀏覽器預設提供的功能)。相反地,如果我們將 controls 移除:

這段影片將無任何控制介面地嵌入頁面。它不會自動播放(除非搭配 autoplay,稍後介紹),也不顯示播放按鈕或進度。對於開發者而言,這意味著需要透過 JavaScript 來控制影片的播放與暫停,或者為使用者提供其他操作方式。如果您計畫自行設計客製化的播放器介面,可以選擇不使用 controls,改由 JavaScript 接管控制權。然而,大多數情況下,直接使用瀏覽器提供的 controls 既方便又具備良好的相容性與無障礙性,適合作為媒體播放器的起點。

想像您的頁面一載入,背景音樂便悄然響起,或首頁影片自動開始播放——這正是 autoplay 屬性的作用。autoplay 是一個布林屬性,啟用後,媒體元素在可能的情況下會自動開始播放,而無需使用者手動按下播放鍵。一旦瀏覽器載入足夠的媒體資料(不必等全部載入完畢),就會嘗試自動播放。

使用範例:

在範例中,我們將 autoplay 和稍後會介紹的 muted、playsinline 結合使用,這是實務上常見的模式。原因是現代瀏覽器對自動播放有一定的限制:為了避免打擾使用者,大多數瀏覽器會阻止含有音訊的影片/音訊自動播放。例如,如果一個影片包含聲音而未靜音,autoplay 通常會被瀏覽器忽略,直到使用者與頁面有互動(如點擊滑鼠、觸碰螢幕)後才允許播放。因此,開發者通常將影片預設設為靜音(muted)以提高自動播放成功的機率。同時,對於行動裝置上的 Safari 而言,還需要加入 playsinline 才能實現在頁面內自動播放(否則 iPhone 可能會進入全螢幕模式並阻止自動播放,詳見後文)。

需要注意的是,autoplay 不接受數值設定。如果希望禁止自動播放,只能移除這個屬性,而不能寫成 autoplay="false" 等形式。只要屬性存在,其值(即使寫成 "false")也會被視為真。在開發中,一般建議謹慎使用自動播放功能:除非媒體內容對於頁面核心體驗至關重要,否則自動播放的媒體可能令使用者反感。可以考慮提供明顯的播放按鈕,讓使用者自主決定何時播放內容,以獲得更佳的使用者體驗。

muted 屬性同樣是布林屬性,用於將媒體預設設為靜音狀態。當一個影片或音訊元素帶有 muted,媒體在開始播放時不會發出聲音。使用者仍然可以透過控制介面手動開啟音量(除非您的頁面另行限制),但默認情況下音量為零。這個屬性的主要用途包括:在頁面載入時播放背景影片或自動播放媒體時避免驚擾使用者,以及配合前述的 autoplay 屬性滿足瀏覽器的自動播放策略要求。

範例:

在這個例子中,我們建立了一個靜音、自動循環播放的背景影片(假設影片沒有控制介面且涵蓋整個背景)。muted 確保了影片自動播放時沒有聲音輸出,因此大部分瀏覽器會允許其自動播放。一般而言,如果您希望媒體自動播放,建議一開始就靜音。除了技術上的必要,這也是為了不打斷使用者——想像一下,瀏覽網頁時突然傳出音樂或旁白,體驗會非常突兀。有了 muted,使用者在準備好之前不會被音訊打擾,除非他們主動開啟聲音。

需要提及的是,muted 屬性的預設值為 false,也就是沒有此屬性時,媒體會依照正常音量播放(如果使用者裝置未靜音且音量調高)。而一旦加入 muted,即便您沒有指定任何值,瀏覽器也會將其視為 true,媒體初始即靜音。若是音訊元素 <audio> 使用 muted,等於預設將音樂或聲音關閉,這在實務上比較少見(因為播放音訊通常就希望有聲音);但在控制影片播放時,muted 非常常用,尤其用於無聲自動播放或背景循環影片等情境。

當媒體播放結束時,是否要自動重新開始播放?loop 屬性可以輕鬆實現循環播放的效果。這是一個布林屬性,當添加 loop 後,無論影片或音訊在播放完畢時,瀏覽器都會自動將播放位置跳回開頭重新播放,形成無縫的循環。

使用 loop 的典型場景包括:背景音樂想要不間斷地播放、多段影片片段串聯播放成環等等。例如:

在這段程式中,當 background.mp3 播放到結尾時,播放頭將立即跳回開頭並繼續播放,如此往復,除非使用者手動停止或暫停。對使用者而言,loop 屬性讓媒體彷彿"無限"播放。有些瀏覽器的控制介面在循環播放時會有所提示(例如在播放進度條上顯示循環符號),以讓使用者瞭解媒體將重頭再播。

需要注意,如果沒有搭配 controls 且沒有其他機制控制,啟用了 loop 的媒體會在背景持續播放下去。所以在設計使用者體驗時,要確保這種循環行為符合預期(例如背景音樂可以一直循環,但提示音效則通常不應循環)。此外,循環播放不意味著完全沒有間斷——播放結束重新開始時,可能會有極短的延遲或卡頓,這取決於瀏覽器的緩衝策略和檔案大小。不過對於大多數情境來說,loop 足以滿足連續播放的需求。如果需要精準無縫(gapless)的循環播放(例如音樂節拍嚴格對齊),可能需要進階的 Web Audio API 來實現,但那已超出 HTML 層級屬性的範疇了。

媒體檔案通常容量較大,瀏覽器應該何時下載它們呢?preload 屬性就是用來提示瀏覽器如何處理媒體的預先載入行為。此屬性可以設定幾種值,告知瀏覽器在未播放前預先下載多少內容比較適當。重要的是,preload 只是建議,最終行為仍由瀏覽器決定,以平衡使用者體驗和效能。

preload 屬性的可用值如下:

none:不要預先載入媒體。在媒體實際要播放之前,瀏覽器都不應下載該媒體的資料。這個選項適用於您確定使用者不一定會觀看/收聽該媒體的情況,例如頁面上有一支可選擇播放的影片,但使用者不點擊就不需要浪費頻寬載入。

metadata:僅預先載入媒體的中繼資料(metadata)。這通常包含內容的長度、影片畫面寬高、第一幀縮圖等基本資訊,但不下載整個媒體內容。使用這個值,瀏覽器可以取得媒體的時間長度等資訊,在使用者按下播放前節省流量。

auto:允許瀏覽器自行決定。一般來說,瀏覽器會嘗試盡可能多地預先載入媒體(可能整段載完),以備使用者點擊播放時能立即觀看或收聽完整內容。如果沒有明確指定值,很多瀏覽器預設行為等同於 auto。

""(空字串):與 auto 相同。HTML 規範中將空字串視為 auto 的同義值。

在此例中,我們設置 preload="metadata",瀏覽器會在背景下載影片的基本資訊(如長度、畫面尺寸),但不會把整部影片都下載完,除非使用者按下播放。如此一來,可以降低對使用者網路的佔用。如果我們改用 preload="auto" 或直接省略 preload(部分瀏覽器預設即視為 auto),那麼瀏覽器可能會在頁面載入時就把影片整個抓下來。這對於需要立即播放的媒體很有用,但對一些可能不看不聽的媒體而言則是浪費。

需特別說明的是,自動播放優先於預載:若一個媒體元素設定了 autoplay,瀏覽器為了盡快開始播放,會自動下載媒體資料,即使 preload 指定為 none。另外,preload 並不能強制瀏覽器一定按規定執行——規範明確指出這只是瀏覽器參考的 hint。例如在行動裝置上,出於流量和能源考量,某些瀏覽器即便設定 auto 也可能不會提前下載大量媒體。不同瀏覽器對預載的預設值也可能不同(規範建議預設為 metadata,但實際上各家實作不一),因此建議顯式設定 preload 能讓行為更可預期。

綜合以上考量,選擇適當的 preload 值應取決於您的情境:如果希望最佳體驗、且媒體對使用者很重要,可使用 auto 讓其準備就緒;反之,為節省資源可用 none;折衷則是 metadata,取得必要資訊而不載入全部內容。

當您在網頁上嵌入影片時,還沒播放前顯示什麼畫面呢?默認情況下,大多數瀏覽器會在影片載入後顯示影片的第一幀畫面作為靜態預覽,但在影片尚未載入之前,可能只顯示一個黑色或空白矩形。poster 屬性正是為了解決這種體驗上的不足。poster 允許開發者指定一張圖片 URL,作為影片的預覽圖或佔位圖,顯示在影片尚未播放前或正在下載時。

範例:

在這段程式中,poster="images/intro_thumbnail.webp" 意味著在影片真正開始播放之前,瀏覽器會先顯示該路徑的圖片(例如影片內容的一個精美截圖或封面圖)作為預覽。這不僅讓版面在影片尚未播放時更美觀,也可以提供使用者一些影片內容的暗示。特別是在影片較大需要較長下載時間時,一張清晰的預覽圖能提高使用者耐心並提供更好的初始印象。

有幾點關於 poster 屬性需要了解:

顯示時機:poster 圖像會在影片未播放或正在下載時顯示。一旦使用者點擊播放並且影片有可播放的幀畫面,瀏覽器通常會切換顯示影片內容而非 poster 圖片。如果影片暫停,瀏覽器通常會停留在目前的幀畫面,而不會再切回顯示 poster。

未指定情況:如果省略 poster,在影片可用前瀏覽器可能顯示一個空白區域或影片下載中的黑畫面。當第一個畫面資料載入後,很多瀏覽器會自動以影片的第一幀作為預設的預覽圖。但第一幀不見得總是理想的展示(例如影片開頭可能是漆黑的一幕)。因此提供自定的 poster 圖像通常能獲得更佳效果。

僅適用影片:poster 屬性只適用於 <video>,音訊 <audio> 沒有視覺畫面,自然也無法設置預覽圖。如果您希望在音訊播放前展示圖片,可以考慮使用其他方式(例如 CSS 或獨立的 <img> 標籤)來配合音訊元素。

利用 poster,我們能在使用者點擊播放之前就吸引他們的注意。想像一個教學影片列表,每個 <video> 都有一張精選的縮圖,使用者透過這些圖就能大致瞭解影片內容並決定是否播放——這比起一片空白或文字描述更為直觀。因此,善用 poster 可以提高多媒體內容的體驗和專業度。

為了讓嵌入的影片契合頁面版面,我們常需要調整影片播放區域的大小。width 和 height 屬性正是用來設定 <video> 元素的寬度與高度(以像素為單位)的。透過這兩個屬性,我們可以定義影片在頁面上佔據的空間尺寸,無須透過額外的 CSS。

最後補充:<source> 元素除了 src 和 type 外,還可以有 media 屬性,用於設定媒體條件(類似 CSS 的 media query),例如只在特定屏幕寬度下使用某來源。但這屬於進階用法,例如提供不同解析度的影片給不同大小螢幕裝置,才能節省頻寬。一般簡單的多格式相容不需要用到 media 屬性,我們這裡重點放在 type 以及基本的多來源配置上。

如果您曾在 iPhone 的 Safari 瀏覽器上點擊過網頁影片,可能會注意到一個特別之處:影片往往自動彈出全螢幕播放,而不是在網頁中的原定位置播放。這是蘋果早期為了提供更佳觀影體驗(全螢幕、避免小螢幕上元素干擾)所做的決定。然而,在許多網站設計中,我們希望影片能夠在原有的頁面布局中播放(所謂inline播放),例如頁面中的一個小視窗,可以邊看影片邊瀏覽其他內容。在行動裝置(特別是 iOS 裝置)上實現這點,就需要用到 playsinline 屬性。

playsinline 是一個布林屬性,表明影片應當在行內播放(inline play),也就是不要切換到裝置的全螢幕播放模式。這個屬性主要作用於行動瀏覽器環境,特別是 iPhone 上的 Safari。在桌面瀏覽器或大部分 Android 瀏覽器上,影片本來就預設行內播放,因此加不加 playsinline 沒明顯差異;但在 iPhone Safari 上,它將阻止點擊播放時自動全螢幕,允許影片直接在原位播放。

範例:

這段影片被設定寬300高168(比例16:9縮小的預覽影片),加上 playsinline 後,如果使用者在 iPhone 上打開這個頁面,影片可以直接在這 300x168 的框中自動播放(已靜音,符合行動瀏覽器自動播放需要),而不會跳到全螢幕模式。這對於一些網頁設計非常重要,例如背景自動播放影片、或網頁中同時展示多個縮小影片等。如果沒有 playsinline,iPhone 用戶一點擊播放,畫面就會強制全螢幕,原頁面的佈局和互動都中斷了。

一些注意事項:

過去為了支援舊版 iOS,開發者需要加入私有屬性例如 webkit-playsinline。在現今大多數情況下,使用標準的 playsinline 已足夠,因為 iOS 10+ 開始 Safari 就支援這個標準屬性。若您特別要照顧更老的 iOS9 裝置,可以兩者同時加上(playsinline webkit-playsinline),以涵蓋所有情況。

即便有 playsinline,自動播放仍需靜音(或無音軌)。iOS Safari 對自動播放的限制與其他瀏覽器類似:有聲音的影片不允許在未經使用者操作時自動播放。因此 playsinline 通常搭配 muted autoplay 一起使用,確保在行內也能自動開始無聲播放。

playsinline 只對影片 <video> 有意義,音訊 <audio> 本來就沒有全螢幕的概念,播放音訊不會阻礙使用者瀏覽其他內容。因此音訊標籤沒有類似屬性。

總的來說,playsinline 提升了行動端多媒體內容的整合度。我們可以更自由地設計版面,讓影片成為頁面的一部分,而不擔心行動裝置切到全螢幕導致體驗割裂。當然,如果您的內容就是希望使用者全螢幕觀看(例如電影預告片等),那可以不使用 playsinline,保留預設行為。

現代網頁常常會載入不同網域的資源,例如將影片檔案存放在 CDN(內容分發網路)或第三方存儲上。當我們的媒體檔案與網頁不在同一網域時,就涉及跨來源請求 (Cross-Origin Request)。crossorigin 屬性即用於控制 <video> 或 <audio> 取得跨域資源時的請求模式。簡單來說,它決定瀏覽器抓取這個媒體檔案時,要不要附帶身份識別(如 cookies、HTTP 認證等),以及抓取後能否將媒體當作安全資源使用於例如 Canvas 畫布等。

crossorigin 可以設定以下幾種值:

anonymous:匿名模式的跨域請求。瀏覽器在請求該媒體時不會附帶使用者的憑證(例如不帶 cookies、不提供HTTP認證資訊)。目的是避免對方伺服器識別出用戶,同時只要對方伺服器有正確的 CORS 頭(如 Access-Control-Allow-Origin),瀏覽器就會允許將此媒體當作未汙染 (untainted) 的資源。這樣未來如果我們想在 Canvas 上繪製這段影片的幀畫面,就不會被同源政策阻擋。

use-credentials:附帶憑證的跨域請求。也就是瀏覽器會帶上 cookies、HTTP Basic Auth 等相關身份資訊去請求影片。這在需要驗證授權的媒體資源時可能用到。然而如果對方伺服器沒有允許憑證(缺少 Access-Control-Allow-Credentials 標頭等),那媒體仍會被標記為汙染的 (tainted),無法在 Canvas 等環境使用。

省略 crossorigin 屬性:若未指定,預設瀏覽器不會以 CORS 的方式去請求資源。換句話說,它就像請求一般 <img> 圖片一樣,不帶 Origin 頭,不執行 CORS 驗證。這種情況下,如果影片來自跨域,瀏覽器允許播放,但會將其視作跨域資源。雖然播放不受限,但若試圖對影片內容做 Canvas 擷取、或使用 Web 音訊 API 讀取音訊資料,會因違反同源政策而失效。因此為了在跨域場景保持更多操作可能性,一般我們會明確指定 crossorigin 為 anonymous 並確保伺服器設置了適當的 CORS 頭。

通常情況下,若您的媒體檔案與網頁在相同網域,不需要使用 crossorigin。但當您從第三方來源嵌入影片或音訊,或使用 CDN 儲存媒體時,建議加上 crossorigin="anonymous",並確認服務器允許跨域訪問。這樣在需要時(例如截取影片畫面當縮圖、或進行可視化處理)才不會碰壁。

這個影片檔案位於 cdn.example.com,和當前網站網域不同。透過設定 crossorigin="anonymous",我們告訴瀏覽器以匿名模式請求。如果該 CDN 的回應有正確的CORS允許(例如 Access-Control-Allow-Origin: * 或允許我們的網域),瀏覽器就會允許我們對影片內容進行進一步操作,如在 Canvas 上繪製某幀影像(常用於實現影片截圖預覽功能)等。如果缺少這個屬性或對方無CORS允許,影片雖然能播放,但屬於受保護的跨域資源,對其做畫布繪製時會拋出錯誤以維護安全。

需要注意的是,crossorigin 並非用來防止他人盜鏈您的媒體(那屬於伺服器該做的事),而是為前端開發者提供一個方式來宣告請求模式。預設瀏覽器不跨域,對於許多公開資源,我們希望瀏覽器按照 CORS 流程,這時就必須使用這個屬性。

最後提醒,如果不知道對方服務器是否設置了CORS,您可以嘗試加入 crossorigin="anonymous" 測試:若影片可以正常播放且允許Canvas操作,就表示CORS成功;若影片完全播放不了,可能是需要驗證(該用 use-credentials)或者CORS被擋。這涉及後端配置,不在本文詳述。

除了以上介紹的主要屬性,HTML5 媒體元素還提供了一些進階或特殊用途的屬性,可用於更細緻地控制媒體行為與介面。以下簡要介紹幾個:

controlsList 屬性:當我們使用預設的瀏覽器控制介面時,某些瀏覽器(主要是 Chromium 核心的瀏覽器如 Chrome、Edge 等)允許透過 controlsList 來調整控制項的顯示。這是一個非布林屬性,可接受數個特定的關鍵字,用空格分隔,例如:

nodownload:隱藏下載按鈕。某些瀏覽器在 <video> 或 <audio> 控制列中會提供一個「下載媒體」的按鈕,開發者可以用此選項將其移除。

nofullscreen:隱藏全螢幕切換按鈕(對影片而言)。如果不希望使用者切換全螢幕,可以嘗試此值。但注意使用者仍可透過其他方式全螢幕(例如瀏覽器內建功能或手勢)。

noremoteplayback:禁用遠端播放,例如防止影片透過 Chromecast、AirPlay 等投放到其他裝置。這對於某些保護內容或特定場景下有用。

範例:controlsList="nodownload nofullscreen"。需要強調的是,controlsList 目前不是所有瀏覽器都支援,如果目標用戶包含支援度較低的瀏覽器,這些設定可能不起作用。而且,隱藏按鈕並不代表真的禁用了功能——例如 nodownload 並不能阻止使用者透過其他手段取得影片,只是拿掉了控制列上的方便入口。因此這屬性主要是優化 UI/UX 用,不能當作 DRM 之類的保護措施。

disablepictureinpicture 屬性:布林屬性,用於禁用畫中畫 (Picture-in-Picture) 功能。在支援畫中畫的瀏覽器上(如 Chrome 可以將影片獨立為桌面小窗播放),預設控制介面會有一個畫中畫按鈕。加上這個屬性,可以隱藏或禁止這項功能。如果您的媒體內容不希望被小窗播放,或小窗播放會影響版權合規,可以考慮設置這個屬性。需要注意 Safari 的做法不同:Safari 對畫中畫使用自己介面控制,也有對應的 JS API,但 disablepictureinpicture 屬性已被 Safari 所支持,方便跨瀏覽器一致設定。

disableremoteplayback 屬性:布林屬性,用於禁用遠端播放功能。遠端播放指的是通過像 AirPlay、Chromecast、Miracast 等技術,將媒體串流到電視或其他裝置播放。如果您不希望影片被「播放到此裝置」這類外部輸出,可以加入此屬性。一樣地,不是所有瀏覽器支援,但像 Safari 上此屬性會對 AirPlay 起作用(Safari 也有自己的屬性如 x-webkit-airplay="deny",但 HTML 標準提供了 disableremoteplayback 作為統一解決方案)。

上述屬性在一般情況下不一定會用到,但在特殊要求下非常有用。例如,假設您架設了一個線上課程平台,影片僅限平台上播放,不希望使用者下載或投影,那麼可以組合使用 controlsList="nodownload" 與 disableremoteplayback 來盡可能限制(雖然不能百分之百杜絕,但可增加門檻)。或者您提供了一個客製化的播放界面,其中包含您自製的全螢幕按鈕,那麼為避免瀏覽器重複出現按鈕,可以用 nofullscreen 隱藏原生的按鈕。

最後提醒,對媒體元素還有一些全域屬性(Global attributes)是所有 HTML 元素通用的,例如 id、class、style、title 等,這些不在本文贅述。但結合這些屬性,我們可以為媒體元素加入 CSS 樣式或 JS 操作掛鉤。例如,用 CSS 設計自訂樣式框架(雖然直接改變原生控制列有限,但可用 ::-webkit-media-controls 等深層選擇器做部分樣式調整),或用 JS 綁定事件(如監聽 ended 事件,在影片結束時做動作)。這些都是在理解屬性的基礎上更進一步的應用。

經過以上章節,我們已經熟悉了 <video> 和 <audio> 的主要屬性及其用途。接下來,我們將以問與答的形式,解決一些初學者常見的問題,加深對這些屬性的理解與實際應用。

問:為什麼我插入的 <audio> 或 <video> 沒有出現任何播放按鈕?

答:您可能忘了加上 controls 屬性。如果沒有 controls,瀏覽器不會顯示預設的播放介面。對於 <audio> 而言,沒有控制介面就看不到播放器(音訊元素會隱形存在於頁面中,除非您用 JavaScript 控制它播放)。解決方法是給元素加上 controls,這樣使用者才能看到並使用播放/暫停等控制鈕。若您刻意不使用瀏覽器內建控制(例如打算自製介面),則需要用 JS 操作元素,例如呼叫 audio.play() 等來播放。

問:我已經設定影片 autoplay,但它仍然不自動播放,尤其在手機上為什麼不作用?

答:現在的瀏覽器出於對使用者的保護,禁止未經互動就自動播放有聲音的媒體。如果影片帶有音訊軌,則必須將 muted 設為靜音才可能自動播放。此外,在行動裝置上(特別是 iPhone),即使靜音也需要 playsinline 才能讓影片在頁面內自動播放而不是進入全螢幕等待使用者操作。所以,確保加上 muted playsinline。例如:

同時確認您的測試環境:某些手機瀏覽器仍不允許任何形式的自動播放,一定要使用者點擊才播放,這並非程式碼問題,而是瀏覽器的策略。總之,若要自動播放,靜音是第一要件,其次盡量在使用者互動後再啟動或提示用戶點擊播放。

問:使用 <video> 提供多個格式真的有必要嗎?我放一個 MP4 好像各大瀏覽器都能播?

答:MP4(H.264 視訊/AAC 音訊)確實目前被廣泛支援,是事實上的標準格式。但是在過去 Firefox、Opera 等對於專利編碼格式的態度保留,曾一度不支援 H.264,需要 WebM 才能播放。如果您的受眾幾乎都使用現代主流瀏覽器,單獨 MP4 通常沒問題。但提供多格式仍然是一種保險措施:萬一有使用者的瀏覽器/裝置不支援某格式,可以自動切換備用。此外,如果影片對體積要求高,WebM/VP9 往往能在相同畫質下比 MP4 更小,對支持它的瀏覽器提供 WebM 可以節省頻寬。因此理想情況下,您可以提供至少 MP4 和 WebM 兩種來源。若精力有限,MP4 作為唯一格式也可以,但請測試各主要瀏覽器確認無誤。

問:為什麼我的影片檔在某些瀏覽器只出現聲音沒有畫面,或完全無法播放?

答:這通常是格式或編碼不相容造成的。影片檔案有容器格式和內部編碼的區別。一支 .mp4 副檔名的影片,可能裡面不是 H.264 視訊或者AAC音訊,若用了冷門編碼(例如某些相機輸出的特殊編碼),瀏覽器可能不支援解碼,導致只播出音訊或甚至無法播放。類似地,一支 .ogg 副檔的影片可能無法在不支援 Theora 的瀏覽器上播放。解決辦法:重新壓制/轉檔影片為標準的編碼格式,或提供多種格式。建議使用常見編碼:視頻H.264或VP9,音訊AAC或MP3等,並封裝為 MP4/WebM 等主流容器。同時在 HTML 裡以 <source> 提供對應格式,讓瀏覽器選。換句話說,先確認媒體文件本身的相容性,再利用 HTML屬性確保正確提供給瀏覽器。

問:我想讓使用者點擊一個按鈕才能播放音訊/影片,不希望顯示預設控制條,怎麼做到?

答:可以不使用 controls 屬性,然後透過 JavaScript 控制播放行為。例如給一個自訂按鈕設置事件監聽器,在點擊時呼叫 videoElement.play() 或 audioElement.play()。瀏覽器允許這種基於使用者互動的播放。而要暫停則呼叫 .pause()。為了讓使用者有視覺反饋,你可能需要自行設計播放/暫停按鈕的切換圖示、進度條等——這相對進階,需要熟悉 HTMLMediaElement API。如果只是單純要一個播放按鈕且不在意進度/時間顯示,那簡單控制還不算太難。另外,要注意如果沒有 controls,使用者也無法自行調節音量或進度,這些都得您用程式來提供介面。

問:能不能隱藏下載按鈕,防止使用者下載影片/音樂?

答:如前文提到,可以嘗試利用 controlsList="nodownload" 來隱藏瀏覽器控制介面的下載按鈕。然而,必須強調這只能算介面上的防君子不防小人。透過開發者工具或直接存取媒體 URL,資源依然能被下載。此外,有的瀏覽器本身也沒提供下載按鈕(例如 Safari 的影片控制欄就沒有專門的下載鍵)。所以 nodownload 更多是改善體驗(不鼓勵隨手下載)用途,不能真正保護內容版權。如果涉及嚴格的內容保護,可能需要串流加密或DRM等更複雜的方案,已超出 HTML5 基本屬性範圍。

問:如何替我的影片加入字幕或多語言字幕?

答:HTML5 定義了 <track> 元素可用於 <video> 中,專門添加字幕或其他文字軌道。這不是 <video> 標籤的屬性,而是一個子元素。使用時,您可以這樣寫:

每個 <track> 指向一個字幕檔(通常是 WebVTT 格式 .vtt 檔)。srclang 標明字幕語言,label 是此軌道顯示名稱,kind="subtitles" 表示這是字幕而非描述或章節等。加上 default 屬性可預設顯示某一條字幕。瀏覽器的控制介面通常會因此出現選擇字幕的選單。這裡順帶提醒,<audio> 沒有內建字幕顯示概念(純音訊很難同步顯示字幕),如果需要為音頻提供文字,可能要另建文字區塊同步播放或使用 <video> 搭配海報圖當成音訊播放器來顯示字幕。

問:在某些裝置上,點擊播放影片時畫面黑屏好幾秒才出現內容,怎麼辦?

答:這可能與影片的編碼和瀏覽器解碼效能有關,也與預載 (preload) 設定有關。首先檢查您的 preload:如果設為 none,表示瀏覽器在用戶點擊播放前都沒有下載資料,那點擊後需要時間下載緩衝,黑屏幾秒是可能的。可以考慮改為 metadata 或 auto,至少先拿到影片第一幀畫面,或者在背景預下載一些內容,縮短點擊播放到看到畫面的延遲。另外也可以提供一張 poster 圖,確保在等待期間有靜態圖像可看。如果問題在於解碼效能(例如影片碼率太高、解析度太大導致弱性能裝置難以及時渲染),則需要從內容製作上優化,提供較低解析度或碼率的版本給那些裝置(可以結合 <source media="..."> 或以 JavaScript 偵測後載入不同影片)。

問:<audio> 和 <video> 元素有建議用哪個嗎?比如我可不可以用 <video> 來播音訊檔?

答:從技術上講,<video> 可以用來播只有音訊的檔案(甚至 MDN 文件也提到 <video> 可以播音訊)。瀏覽器會播出聲音但可能只顯示一個黑畫面(或可以靠 CSS 隱藏掉畫面)。然而在語意和使用者體驗上,建議還是分開使用:音訊內容用 <audio>,影片內容用 <video>。這不僅是語意正確(有助於無障礙技術辨識內容類型),也因為各瀏覽器針對 <audio> 和 <video> 的控制介面有所差異。例如 <audio> 的控制列通常比較簡潔(因為沒有畫面,只顯示播放鍵、進度和音量),而 <video> 則包含畫面窗口和全螢幕按鈕等。如果您誤用 <video> 播音樂,使用者可能看到一個奇怪的黑色縮圖或空視頻框。此外,一些行動瀏覽器可能對待 <audio> 更寬鬆(如允許後台播放等),對 <video> 則未必。因此,依內容選用正確的元素是最佳做法。