不能直接用 的 controls 属性，因原生控件样式无法统一、不支持自定义逻辑（如倍速菜单）、兼容性差（如ios 10以下不响应play()）、无法联动业务状态（如会员过期禁用下载）；真正自定义需接管播放行为并替换ui，即移除原生控件后通过js调用play()/pause()/currenttime等原生api，并处理ios自动播放限制、seeking事件、volume锁定、moov原子前置等兼容性问题。
为什么不能直接用 <video></video> 的 controls 属性？
浏览器原生控件样式无法统一，且不支持自定义按钮逻辑（比如点击“倍速”弹出选项菜单）、不兼容旧版 Safari（iOS 10 以下不响应 play() 调用）、无法与业务状态联动（如会员过期时禁用下载按钮）。真正需要“自定义”，本质是**接管播放行为 + 替换 UI 元素**，而非仅隐藏原生控件。
如何用 JS 控制 <video></video> 并绑定自定义按钮？
必须先移除原生控件，再通过 video 元素的 DOM 方法和事件手动实现交互。关键点不是“怎么画按钮”，而是“怎么让按钮真正控制播放器”：
-
video元素需设controls="false"或直接不写该属性 - 所有操作必须调用原生方法：
play()、pause()、load()（切换 src 后需调用） - 进度条拖动要监听
input事件，然后设置video.currentTime = value - 音量/倍速等属性需同步更新
video.volume、video.playbackRate - 注意 iOS Safari 限制：自动播放需用户手势触发，
play()可能返回 Promise，需.catch(e => console.warn("Autoplay prevented"))
<video id="myVideo" width="640" height="360">
<source src="video.mp4" type="video/mp4">
</video>
<button id="playBtn">▶</button>
<input type="range" id="progressBar">
<script>
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
const progressBar = document.getElementById('progressBar');
playBtn.addEventListener('click', () => {
if (video.paused) {
video.play().catch(e => console.warn("Play failed:", e));
} else {
video.pause();
}
});
progressBar.addEventListener('input', () => {
video.currentTime = progressBar.value;
});
video.addEventListener('timeupdate', () => {
progressBar.value = video.currentTime;
});
</script>
PHP 在其中起什么作用？
PHP 本身不参与前端播放控制，它的角色仅限于服务端支撑：
- 生成带签名的临时视频 URL（防止盗链），例如用
hash_hmac()生成 token，校验后输出readfile($path) - 读取视频元信息（时长、分辨率）并注入到 HTML 中，避免前端用
loadedmetadata等异步时机——getid3库可解析 MP4/FLV 头部 - 根据用户权限动态输出不同控件（如免费用户看不到“下载”按钮，PHP 渲染时就不输出对应
<button class="download"></button>）
别试图用 PHP 输出 JavaScript 控制逻辑，所有播放交互必须在浏览器中完成。
立即学习“PHP免费学习笔记（深入）”；
常见坑：iOS 上点击没反应、进度条卡住、音量无效
这些问题几乎都源于对原生 API 行为理解偏差或未处理兼容性边界：
- iOS 不允许 JS 自动调用
play()—— 必须由用户真实点击触发，且该点击事件处理器内要立即调用play() -
currentTime设值后不会立刻生效，需监听seeking和seeked事件确认完成，否则progressBar.value可能跳变 -
volume在 iOS 上被锁定为 1.0，无法通过 JS 修改，只能隐藏音量控件或提示“系统音量控制” - MP4 视频若未开启
moov原子前置（即“fast start”），duration初始为NaN，导致进度条计算失败——需用ffmpeg -i in.mp4 -c copy -movflags +faststart out.mp4重编码
自定义控件最难的不是样式，是把每个用户操作准确映射到原生视频元素的状态变迁上，中间漏掉一个事件监听或 Promise 处理，就会出现“点了没反应”这种看似简单实则难定位的问题。
