代码说明
- 使用原生 HTML5 video 元素，配置 autoplay、muted、loop、playsinline 以满足移动端自动播放策略，同时隐藏原生控件（不添加 controls）。
- 响应式方案：video 宽度 100%、高度自适应，容器可选使用 aspect-ratio 降低布局位移；不依赖私有前缀。
- 无障碍与交互：提供可聚焦的视频区域与键盘交互（Space/Enter 切换播放），并在自动播放失败或用户偏好减少动态时显示可访问的“点击播放”覆盖按钮；提供隐藏描述文本，提升读屏器体验。
- 性能优化：预加载仅元数据（preload="metadata"），使用 poster 提升首屏感受；当自动播放失败时才与用户交互。
- 兼容性：iOS Safari 通过 playsinline 与 muted 确保自动播放尽可能可行；回退文本和下载链接用于旧浏览器降级。
HTML代码块
<section class="video-wrapper" aria-label="品牌介绍视频">
<video
id="brandVideo"
class="video"
preload="metadata"
poster="https://media.example.com/posters/brand-intro.jpg"
autoplay
muted
loop
playsinline
aria-describedby="brandVideoDesc"
aria-label="品牌介绍视频，自动播放且静音"
>
<source src="https://media.example.com/videos/brand-intro.mp4" type="video/mp4" />
您的浏览器不支持 HTML5 视频。您可以
<a href="https://media.example.com/videos/brand-intro.mp4">下载视频</a>
进行观看。
</video>
<!-- 无障碍描述（屏幕阅读器可读） -->
<div id="brandVideoDesc" class="sr-only">
本视频默认自动播放且静音。按空格键或回车键可暂停/播放。
</div>
<!-- 覆盖式交互按钮：仅在自动播放失败或用户偏好减少动态时显示 -->
<button
class="video-overlay"
type="button"
aria-controls="brandVideo"
aria-label="播放视频"
hidden
>
点击播放
</button>
<noscript>
您的浏览器未启用 JavaScript。若无法自动播放，请
<a href="https://media.example.com/videos/brand-intro.mp4">点击观看视频</a>。
</noscript>
</section>
<script>
(function () {
var video = document.getElementById('brandVideo');
var overlay = document.querySelector('.video-overlay');
// 双重保证静音，提升移动端自动播放成功率
video.muted = true;
// 优先尊重用户减少动态偏好：禁用自动播放，显示交互按钮
var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
function showOverlay(label) {
if (label) overlay.textContent = label;
overlay.hidden = false;
}
function hideOverlay() {
overlay.hidden = true;
}
function tryAutoplay() {
// 如果用户偏好减少动态，则不自动播放
if (prefersReducedMotion.matches) {
video.removeAttribute('autoplay');
showOverlay('点击播放');
return;
}
// 尝试自动播放
var playPromise = video.play();
if (playPromise && typeof playPromise.then === 'function') {
playPromise.then(function () {
hideOverlay();
}).catch(function () {
// 某些环境仍可能需要用户手势
showOverlay('点击播放');
});
}
}
// 初始尝试
if (document.readyState === 'complete' || document.readyState === 'interactive') {
tryAutoplay();
} else {
document.addEventListener('DOMContentLoaded', tryAutoplay);
}
// 用户交互：点击覆盖按钮或视频本身切换播放
function togglePlayback() {
if (video.paused) {
video.play().then(hideOverlay).catch(function () {
showOverlay('点击播放');
});
} else {
video.pause();
showOverlay('点击播放');
}
}
overlay.addEventListener('click', togglePlayback);
video.addEventListener('click', togglePlayback);
// 键盘支持：Space/Enter 切换播放
video.setAttribute('tabindex', '0');
video.addEventListener('keydown', function (e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
togglePlayback();
}
});
// 状态联动
video.addEventListener('play', hideOverlay);
video.addEventListener('pause', function () { showOverlay('点击播放'); });
video.addEventListener('ended', function () {
// 循环播放开启时，ended 不会停留；关闭循环时可提示“重新播放”
if (!video.loop) showOverlay('重新播放');
});
// 错误处理
video.addEventListener('error', function () {
showOverlay('视频加载失败');
});
// 监听用户偏好变更
if (prefersReducedMotion.addEventListener) {
prefersReducedMotion.addEventListener('change', tryAutoplay);
}
})();
</script>
样式配置
/* 容器：全宽自适应，可选 aspect-ratio 降低布局位移（按需调整或移除） */
.video-wrapper {
position: relative;
width: 100%;
/* 可选：若已知视频比例，建议设置，减少布局抖动。例如 16/9： */
/* aspect-ratio: 16 / 9; */
background-color: #000;
}
/* 视频：填满容器宽度，高度按比例自适应 */
.video {
display: block;
width: 100%;
height: auto;
background-color: #000;
outline: none;
}
/* 覆盖按钮：仅在需要交互时显示（自动播放失败或暂停） */
.video-overlay[hidden] {
display: none !important;
}
.video-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
padding: 0;
border: none;
background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
color: #fff;
font: 500 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
cursor: pointer;
}
.video-overlay:focus-visible {
outline: 2px solid #fff;
outline-offset: -2px;
}
/* 屏幕阅读器可见、视觉隐藏的文本 */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* 可选：在小屏上微调按钮字号 */
@media (max-width: 480px) {
.video-overlay { font-size: 14px; }
}
使用说明
- 部署方法
- 将 HTML、CSS 与脚本按上述结构粘贴到页面中；建议将样式置于站点样式表或放在中，以避免 FOUC。
- 视频源为 MP4（H.264/AAC）标准格式，已满足现代浏览器兼容性需求。
- 参数调整
- 宽度/高度：本方案已是 width: 100%、height: auto 的响应式；如已知视频比例，可在 .video-wrapper 上启用 aspect-ratio: 宽/高 进一步减少布局位移。
- 自动播放/静音/循环：对应 video 元素上的 autoplay、muted、loop；当前已启用。若需关闭，移除相应属性即可。
- 预览图：修改 poster 属性链接为目标图像。
- 控件显示：已隐藏原生控件。保留了轻量交互（点击视频/覆盖按钮、键盘 Space/Enter 切换播放）以满足可访问性；如需完全禁用交互，移除覆盖按钮与相关脚本，但不建议这样做。
- 无障碍建议
- 如有字幕文件，建议添加 WebVTT 字幕轨道：
- 保留 aria-label、aria-describedby 与键盘交互，提升可达性。
- 兼容性说明
- iOS Safari 要求 playsinline 与 muted 才能在非全屏下自动播放，代码已配置。
- 若某些环境仍阻止自动播放，将显示覆盖按钮提示用户点击播放。
- 性能建议
- 预加载设置为 metadata，减少初次加载开销；将视频托管在支持 Range 请求的服务器，以便分段加载与拖动。
- 若页面存在多段视频，建议仅对首屏视频使用 autoplay，其余在进入视口后再播放（可结合 IntersectionObserver 实现）。
