关闭 video 默认控件需移除 controls 属性（不可写 controls="false"），此时视频变为纯容器，所有交互须用 JS 控制；注意移动端自动播放限制、iOS 音量只读、currentTime 异步生效等关键约束。
video 标签默认控件怎么关掉
直接在 <video> 标签里加 controls 属性，浏览器就会显示原生播放器；想自定义，第一步就是把它干掉——删掉 controls 属性，或显式设为 controls="false"（注意：HTML 中布尔属性写成 controls=false 无效，必须是移除该属性或用 controls=""，但最稳妥的是**完全不写**）。
移除后，<video> 变成纯播放容器：不能点、不能拖、不能静音，所有交互都得你手写 JS 控制。
用 JS 控制播放/暂停/音量这些基础操作
DOM 元素暴露了标准 API，比如 play()、pause()、muted、volume、currentTime。关键点不是“能不能调”，而是“什么时候能调”：
- 移动端 iOS Safari 和 Android Chrome 对自动播放限制极严，
play()必须由用户手势（如click）触发，否则抛错DOMException: play() failed because the user didn't interact with the document first -
volume在部分浏览器（尤其 iOS）被锁定为只读，改了也没用；muted倒是可靠，建议优先用静音切换代替音量滑块 -
currentTime设值后不会立即生效，要监听seeked事件确认跳转完成
<video id="myVideo" src="demo.mp4"></video>
<button id="playBtn">播放</button>
<script>
const video = document.getElementById('myVideo');
const playBtn = document.getElementById('playBtn');
playBtn.addEventListener('click', () => {
video.play().catch(e => console.warn('自动播放被阻止:', e));
});
</script>
实现进度条和时间显示的坑点
进度条本质是同步 currentTime 和 duration，但有三个常见翻车点：
立即学习“前端免费学习笔记（深入）”；
-
video.duration初始为NaN，需等loadedmetadata事件后才可用 - 拖动进度条时，用
input事件比change更及时，但需配合preventDefault()防止双触发 - 更新 UI 时别直接用
Math.floor(video.currentTime)算秒数——它可能返回0或NaN，应先判断isFinite(video.currentTime)
示例中用 <input type="range"> 模拟进度条，注意绑定 value 前必须等元数据加载完成：
<input type="range" id="progress" min="0" max="100">
<span id="timeDisplay">00:00 / --:--</span>
<script>
const progress = document.getElementById('progress');
const timeDisplay = document.getElementById('timeDisplay');
video.addEventListener('loadedmetadata', () => {
progress.max = video.duration;
updateTimeDisplay();
});
video.addEventListener('timeupdate', updateTimeDisplay);
function updateTimeDisplay() {
if (isFinite(video.currentTime) && isFinite(video.duration)) {
const curr = Math.floor(video.currentTime);
const total = Math.floor(video.duration);
timeDisplay.textContent = `${formatTime(curr)} / ${formatTime(total)}`;
progress.value = video.currentTime;
}
}
function formatTime(seconds) {
return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;
}
</script>
为什么自定义控件在 iOS 上特别难搞
不是你的 JS 写错了，是 Safari 故意锁死部分行为：
- 无法通过 JS 触发全屏（
video.webkitEnterFullscreen()已废弃，且仅限用户手势内调用） - 无法隐藏右上角的「原生控制栏」（那个小画中画按钮+音量图标），即使没写
controls，iOS 也会在视频区域悬停时自动弹出 -
playsinline属性必须显式加上，否则 iPhone 默认强制全屏播放 - 海报图（
poster）在 iOS 上容易不显示，建议用 CSS 背景图兜底
所以真实项目里，如果目标用户含大量 iOS 用户，建议保留 controls 属性 + CSS 覆盖隐藏（用 video::-webkit-media-controls 伪类），而不是彻底手写——后者兼容成本远高于收益。
