本文详解如何解决 video.js 在本地站点中 hls 视频无法自动播放、仅显示黑框及尺寸过小的问题，通过添加 `autoplay muted` 和 `fluid="true"`（或 `data-setup` 配置）实现即开即播与响应式全宽显示。
在使用 Video.js 播放 HLS 流（如 .m3u8 地址）时，你可能会遇到这样的现象：代码在 W3Schools 的 Try-it Editor 中运行流畅、自动播放；但部署到自有网站后，页面仅渲染出一个带播放按钮的小黑框，需手动点击才能启动视频，且默认尺寸远小于视口——这并非代码错误，而是浏览器策略与 Video.js 初始化方式共同导致的典型问题。
核心原因有两个：
- 自动播放限制：现代浏览器（Chrome、Safari、Firefox 等）出于用户体验与性能考虑，禁止有声音的视频自动播放。若 HLS 流包含音频轨道，仅加 autoplay 属性无效；必须同时声明 muted，才能触发静音自动播放（autostart）。
- 尺寸未适配：<video-js> 默认为固定宽高（如 640×264），不会随容器伸缩。W3Schools 编辑器可能隐式应用了全局样式或容器约束，而你的页面缺少响应式配置，导致“黑框”感明显。
✅ 正确解决方案如下：
第一步：启用静音自动播放 + 流体布局
将原 <video-js> 标签修改为：
<video-js
id="vid1"
controls
autoplay
muted
preload="auto"
data-setup='{"fluid": true}'
>
<source
src="https://vcp.myplaytv.com/promar/promar/playlist.m3u8"
type="application/x-mpegURL"
/>
</video-js>⚠️ 注意事项：
- autoplay 与 muted 必须同时存在，缺一不可；
- data-setup='{"fluid": true}' 是 Video.js 7+ 推荐的声明式配置方式，等效于 JavaScript 中调用 videojs(vid, { fluid: true })，它使播放器宽度 100% 占满父容器，并按 16:9（可配置）比例自适应高度；
- 移除手动 const player = videojs(vid); 初始化——因为 data-setup 已自动完成初始化；若保留 JS 初始化，需显式传入 { fluid: true }，否则配置不生效。
第二步：确保父容器具备合理布局上下文
fluid: true 依赖父元素提供宽度基准。建议为 <video-js> 添加包裹层并设置最小高度（避免折叠）：
<div style="width: 100%; max-width: 1200px; margin: 0 auto;"> <video-js ...></video-js> </div>
同时，确认 <head> 中已正确引入 Video.js CSS 与 JS（你当前 CDN 链接无误，但建议升级至最新稳定版，如 7.23.0，以获得更好的 HLS 兼容性）。
? 进阶提示：
- 若需真正“全屏”（非全窗口，而是占满视口），可在 CSS 中添加：
.video-js { width: 100vw !important; height: 100vh !important; }并配合 object-fit: cover 保证画面填充；但注意移动端体验，建议优先使用 fluid + responsive 容器方案。
- HLS 支持依赖 videojs-contrib-hls（Video.js 7.10+ 已内置），无需额外引入；但务必确保 .m3u8 地址可被浏览器直接访问（无跨域/CORS 阻断，服务端需返回 Access-Control-Allow-Origin: *）。
总结：自动播放的关键是 autoplay muted，视觉“黑框”的根源是尺寸未响应式化。只需一行 data-setup 配置 + 两个 HTML 属性，即可复现 W3Schools 中的丝滑体验——简洁、可靠、符合现代 Web 标准。
