M3U8 Player

如何在浏览器中播放 M3U8 视频

发布于 2026-10-15 · 阅读约 5 分钟

目录

  1. 为什么浏览器不能直接播 m3u8
  2. Safari 原生支持
  3. 使用 hls.js 播放
  4. 使用播放器 SDK

为什么浏览器不能直接播 m3u8

除了 Safari，绝大多数浏览器（Chrome、Firefox、Edge）的原生 <video> 标签并不支持 HLS（m3u8）协议。这是因为 HLS 涉及播放列表解析、分片下载、解码拼接等复杂逻辑，需要额外的 JavaScript 库来实现。

核心技术是 Media Source Extensions（MSE），它允许 JavaScript 动态地把媒体数据喂给 <video> 元素。

Safari 原生支持

Safari（包括 iOS Safari）原生支持 HLS，可以直接把 m3u8 地址赋给 video.src：

<video src="https://example.com/index.m3u8" controls></video>

但这种方式无法跨平台，且可控性较差。

使用 hls.js 播放

hls.js 是最流行的开源 HLS 客户端库，基于 MSE 实现，兼容所有现代浏览器。基本用法：

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<video id="video" controls></video>
<script>
  var video = document.getElementById('video');
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://example.com/index.m3u8');
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://example.com/index.m3u8';
  }
</script>

使用播放器 SDK

如果你不想自己处理复杂逻辑，可以使用成熟的播放器 SDK，如本站使用的腾讯云 TCPlayer，或 video.js 配合 videojs-contrib-hls 插件。这些 SDK 封装了播放列表解析、自适应码率、错误处理等功能，开箱即用。

本站的 在线播放器 正是基于 SDK 实现，无需编写代码即可在浏览器中播放 m3u8。