网页里怎么嵌入M3U8播放器，代码怎么写

很多做网站的朋友问我，怎么在自己的网页里加一个能播M3U8的播放器。其实办法有好几种，从最简单的iframe嵌入，到自己写代码集成播放器库，难度逐步增加。我按由易到难的顺序给大家讲。

最简单的办法：iframe嵌入

如果你不想折腾任何代码，直接用一个在线播放器的iframe嵌入是最快的。像我们网站的player.html就支持这种用法：

<iframe src="https://3m8u.kixtools.com/player.html?url=你的M3U8链接" width="640" height="360" frameborder="0" allowfullscreen></iframe>

这种方式的好处是零开发成本，复制粘贴就能用。缺点是样式控制比较受限，而且依赖第三方服务。如果对方网站挂了，你页面里的播放器也跟着用不了。

用hls.js自己写

如果你想把播放器完全掌握在自己手里，可以用hls.js这个开源库。它是目前最流行的HLS网页播放方案，底层把M3U8的TS切片转成MP4片段，喂给浏览器的原生video标签。

基本的代码结构是这样的：

<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  var video = document.getElementById('video');
  var hls = new Hls();
  hls.loadSource('你的M3U8链接');
  hls.attachMedia(video);
</script>

hls.js的优点是轻量、可控性强，而且社区活跃，遇到问题基本都能在GitHub Issues里找到答案。缺点是不支持iOS的Safari，因为Safari原生就支持HLS，不需要hls.js。

用TCPlayer这种商业SDK

如果你需要更丰富的功能，比如弹幕、清晰度切换、截图、水印这些，那自己写就太麻烦了。可以接入腾讯云TCPlayer、阿里云Aliplayer这类商业播放器。

以TCPlayer为例，引入它们的CSS和JS文件，然后一行代码初始化：

var player = TCPlayer('player-container-id', {
    sources: [{ src: '你的M3U8链接' }],
    licenseUrl: '你的license地址'
});

功能确实强大，UI也好看，但缺点是要申请license，而且免费额度用完之后要付费。小规模用用没问题，量大的时候成本要考虑进去。

iOS兼容要注意

前面说了，Safari原生支持HLS，所以你用hls.js的时候，在iOS上会失效。稳妥的做法是先判断浏览器支不支持原生HLS：

if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = '你的M3U8链接';
} else if (Hls.isSupported()) {
    // 用hls.js
}

这样写之后，各平台就都能兼容了。其实前端播M3U8的方案已经很成熟，选对工具，半天就能搞定。