当前位置：首页 > 文章列表 > 文章 > 前端 > Video.js播放HLS全屏设置教程

Video.js播放HLS全屏设置教程

2026-02-04 19:18:40 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《Video.js 播放 HLS 自动全屏设置方法》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

如何让 Video.js 播放 HLS 流时自动播放并全屏适配

本文详解如何解决 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）。
尺寸未适配：默认为固定宽高（如 640×264），不会随容器伸缩。W3Schools 编辑器可能隐式应用了全局样式或容器约束，而你的页面缺少响应式配置，导致“黑框”感明显。

✅ 正确解决方案如下：

第一步：启用静音自动播放 + 流体布局
将原标签修改为：

<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 依赖父元素提供宽度基准。建议为添加包裹层并设置最小高度（避免折叠）：

<div style="width: 100%; max-width: 1200px; margin: 0 auto;">
  <video-js ...></video-js>
</div>

同时，确认中已正确引入 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 标准。

今天关于《Video.js播放HLS全屏设置教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！