video 标签把视频播放变成了 HTML 的一等公民：src 指定地址，controls 属性一行就能得到播放/暂停/进度条/音量套件，poster 定义封面帧，loop/muted/autoplay 控制播放行为。不支持的视频格式会之间的回退内容由 source 标签提供，浏览器会按顺序挑第一个能解码的。
进阶玩法全靠 Media API：video.duration 拿总时长，currentTime 跳转进度，playbackRate 倍速播放，textTracks 管理字幕轨道。自定义播放器本质就是隐藏默认 controls、用自己的按钮调这些方法，再监听 timeupdate/canplay/ended 等事件更新 UI。
<style> .vbox { width: 320px; border: 1px solid #4a9eff; border-radius: 10px; } .vbox video { width: 100%; display: block; border-radius: 10px; } .bar { display: flex; gap: 8px; align-items: center; padding: 8px; } .bar button { border: none; background: #4a9eff; color: #fff; border-radius: 6px; padding: 4px 12px; cursor: pointer; } .prog { flex: 1; height: 6px; background: #e78a3e; border-radius: 3px; } </style> <div class="vbox"> <video src="https://www.w3schools.com/html/mov_bbb.mp4" poster="https://picsum.photos/320/180"></video> <div class="bar"> <button onclick="var v=document.querySelector('video');v.paused?v.play():v.pause()">播放/暂停</button> <div class="prog"></div> <span>原生 video 标签</span> </div> </div>