HTML5 Video標籤實現Chrome瀏覽器視頻播放：原生標籤屬性與格式兼容

最簡方案

Chrome原生支持HTML5<video>標籤，無需插件：

<video width="640" height="360" controls preload="metadata">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogv" type="video/ogg">
    您的瀏覽器不支持HTML5視頻播放。
</video>

關鍵屬性

格式兼容性

• MP4 (H.264/AAC)：Chrome、Edge、Safari、Firefox(部分)全支持，**首選**。
• WebM (VP8/VP9 + Vorbis/Opus)：Chrome、Firefox、Edge支持，開源免專利。
• Ogg (Theora + Vorbis)：Firefox、Chrome支持，較舊。
• 策略：<source>按優先級排列，瀏覽器自動選擇第一個支持的格式。

JS控制示例

const video = document.querySelector('video');
video.play().catch(e => console.log('自動播放被阻止:', e));
video.addEventListener('ended', () => console.log('播放結束'));
// 倍速播放
video.playbackRate = 1.5;

進階：自定義播放器UI

• 隱藏controls，用CSS+JS構建自定義控制欄。
• 推薦庫：Video.js、Plyr、MediaElement.js。

參考教程

W3School HTML5視頻教程：https://www.w3school.com.cn/html5/html5_video.asp

1. 上一篇文章： C語言字符循環移位：大小寫字母表環形處理與ASCII碼運算
2. 下一篇文章： VS調試時窗口最小化無法恢復：斷點阻塞UI線程導致窗口未完成創建

程式設計綜合問答

C++ 雙曲正弦函數：正確頭文件與函數名 sinh()

錯誤 嘗試使用 sh()，編譯器報未宣告。 正解 **頭

Ghost 映像檔 vs ISO 映像檔：本質差異與適用場景深度解析

核心定義 特性Ghost 映像檔ISO 映像檔 來源

Android 自定義 View 綁定自定義監聽器空指針：構造器缺失 AttributeSet 導致 XML 膨脹失效

現象 自定義 `TopBar` 在 XML 中使用 `fin

C++ 循序表操作作業：請貼出代碼而非截圖以利協助

提問者上傳模糊截圖要求完成資料結構循序表操作代碼，無法看清需