Video.js是一款功能强大的前端视频播放器库，支持多种视频流格式，其中HLS流是当下常用的自适应码率流格式。要实现HLS流自动播放且全屏自适应的效果，需要从播放器初始化、流加载、自动播放策略适配、样式配置等多个维度进行设置。
基础环境准备
首先需要在项目中引入Video.js的核心库和HLS支持插件，Video.js从7.x版本开始已经内置了HLS支持，无需额外引入videojs-contrib-hls插件，直接使用即可。
在HTML页面中引入相关资源：
<link rel="stylesheet" href="https://vjs.zencdn.net/7.20.3/video-js.css"> <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
播放器基础配置
先创建基础的播放器容器，然后初始化播放器实例，这里需要提前设置好部分基础参数。
HTML容器定义
在页面中添加video标签作为播放器容器：
<video id="myPlayer" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" ></video>
初始化播放器并加载HLS流
使用JavaScript初始化播放器，指定HLS流地址，同时配置基础参数：
// 初始化播放器
const player = videojs('myPlayer', {
// 设置HLS流地址
sources: [{
src: 'https://ipipp.com/hls/test.m3u8',
type: 'application/x-mpegURL'
}],
// 关闭自动静音，部分浏览器要求自动播放必须静音
muted: false,
// 设置播放器自适应父容器
fluid: true,
// 预加载策略
preload: 'auto'
});
实现自动播放功能
浏览器的自动播放策略通常要求视频要么静音，要么用户有过交互行为，直接设置autoplay参数可能会失效，需要做兼容处理。
常规自动播放配置
在播放器配置中添加autoplay参数，同时处理自动播放失败的场景：
const player = videojs('myPlayer', {
sources: [{
src: 'https://ipipp.com/hls/test.m3u8',
type: 'application/x-mpegURL'
}],
// 开启自动播放
autoplay: true,
// 兼容浏览器策略，自动播放失败时静音重试
muted: false,
fluid: true
});
// 监听自动播放失败事件
player.on('error', function() {
// 自动播放失败时，尝试静音后播放
player.muted(true);
player.play().then(() => {
// 播放成功后可以提示用户开启声音
console.log('已静音自动播放，可手动开启声音');
}).catch((err) => {
console.log('自动播放失败，需要用户交互后播放', err);
});
});
// 用户点击页面后尝试播放（处理需要交互的场景）
document.addEventListener('click', function playOnInteraction() {
if (player.paused()) {
player.play().then(() => {
// 如果之前是静音状态，播放后可以取消静音
if (player.muted()) {
player.muted(false);
}
});
}
// 只执行一次
document.removeEventListener('click', playOnInteraction);
});
实现全屏自适应
全屏自适应需要保证播放器在全屏状态下，视频画面不会被拉伸，同时适配不同屏幕比例，主要通过样式配置和播放器参数实现。
开启流体布局
在播放器初始化时设置fluid: true，这个参数会让播放器宽度自适应父容器，高度按比例自动计算，是实现自适应的基础。
全屏样式配置
添加自定义CSS，保证全屏时视频画面保持原始比例，不被拉伸：
/* 播放器容器基础样式 */
.video-js {
/* 最大宽度限制，避免过大屏幕下画面过度拉伸 */
max-width: 100%;
}
/* 全屏状态下的视频画面样式 */
.video-js.vjs-fullscreen .vjs-tech {
/* 保持视频原始比例，居中显示 */
object-fit: contain;
/* 背景色设置为黑色，避免留白区域突兀 */
background-color: #000;
}
全屏事件处理
如果需要监听全屏状态变化，做额外的逻辑处理，可以添加以下代码：
// 监听进入全屏事件
player.on('fullscreenchange', function() {
if (player.isFullscreen()) {
console.log('已进入全屏模式');
// 全屏时可以调整额外参数，比如隐藏其他页面元素
} else {
console.log('已退出全屏模式');
}
});
完整示例代码
以下是整合了自动播放和全屏自适应的完整实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js播放HLS流自动播放全屏自适应</title>
<link rel="stylesheet" href="https://vjs.zencdn.net/7.20.3/video-js.css">
<style>
.video-js {
max-width: 100%;
}
.video-js.vjs-fullscreen .vjs-tech {
object-fit: contain;
background-color: #000;
}
</style>
</head>
<body>
<video
id="myPlayer"
class="video-js vjs-default-skin"
controls
preload="auto"
></video>
<script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
<script>
const player = videojs('myPlayer', {
sources: [{
src: 'https://ipipp.com/hls/test.m3u8',
type: 'application/x-mpegURL'
}],
autoplay: true,
muted: false,
fluid: true,
preload: 'auto'
});
player.on('error', function() {
player.muted(true);
player.play().then(() => {
console.log('已静音自动播放，可手动开启声音');
}).catch((err) => {
console.log('自动播放失败，需要用户交互后播放', err);
});
});
document.addEventListener('click', function playOnInteraction() {
if (player.paused()) {
player.play().then(() => {
if (player.muted()) {
player.muted(false);
}
});
}
document.removeEventListener('click', playOnInteraction);
});
player.on('fullscreenchange', function() {
if (player.isFullscreen()) {
console.log('已进入全屏模式');
} else {
console.log('已退出全屏模式');
}
});
</script>
</body>
</html>
常见问题排查
- 自动播放不生效：检查浏览器自动播放策略，优先尝试静音自动播放，或者引导用户点击页面后再播放。
- 全屏后画面拉伸：确认CSS中设置了
object-fit: contain，同时播放器开启了fluid流体布局。 - HLS流加载失败：检查流地址是否正确，是否支持跨域，Video.js版本是否支持HLS格式。