通过 JS 库如 hls.js 就可以让 Chrome（或其他不原生支持 HLS 的浏览器）直接播放 .m3u8 视频流。下面我来详细解释怎么使用 hls.js 来播放 .m3u8 文件。
✅ 什么是 hls.js？
hls.js 是一个用 JavaScript 编写的客户端 HLS 播放库，它可以让不原生支持 HLS 的浏览器（比如 Chrome、Firefox）通过 <video> 标签播放 .m3u8 视频。
✅ 使用 hls.js 播放 .m3u8 的完整步骤：
🔧 步骤 1：引入 hls.js
你可以使用 CDN 链接引入它：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
🎬 步骤 2：添加 <video> 标签
<video id="video" controls width="640" height="360"></video>
💻 步骤 3：编写播放逻辑
<script>
const video = document.getElementById('video');
const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; // 这里替换成你的 m3u8 地址
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
// 兼容 Safari
video.src = videoSrc;
video.addEventListener('loadedmetadata', function () {
video.play();
});
} else {
alert("你的浏览器不支持播放 HLS 视频");
}
</script>
📄 完整的 HTML 示例（可直接保存运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HLS.js 播放器</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<h2>使用 HLS.js 播放 .m3u8</h2>
<video id="video" controls width="800" height="450"></video>
<script>
const video = document.getElementById('video');
const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; // 替换成你的视频源
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
video.addEventListener('loadedmetadata', function () {
video.play();
});
} else {
alert('此浏览器不支持 HLS 播放。');
}
</script>
</body>
</html>
✅ 使用建议
.m3u8文件必须是公网可访问的链接（或者你有正确的本地服务器支持 CORS）。- 如果你本地打开
.html文件，浏览器可能会限制跨域访问。建议用本地服务器（如 VSCode + Live Server）打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HLS.js 播放器</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: black;
}
video {
width: 100%;
height: 100%;
object-fit: contain;
background: black;
}
</style>
</head>
<body>
<video id="video" controls></video>
<script>
const video = document.getElementById('video');
const videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; // 替换为你的视频流地址
function startPlayback() {
video.volume = 1.0; // 设置音量为 100%
video.muted = false;
// 请求全屏
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
} else if (video.msRequestFullscreen) {
video.msRequestFullscreen();
}
video.play().catch((err) => {
console.warn('自动播放被阻止：', err);
});
}
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
startPlayback();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
video.addEventListener('loadedmetadata', function () {
startPlayback();
});
} else {
alert('此浏览器不支持 HLS 播放。');
}
</script>
</body>
</html>