xgplayer播放m3u8视频踩坑记录

我司在做一个视频学习的网站，为了保护视频版权，采用了hls视频加密（视频地址后缀是.m3u8），浏览器原生video大部分是不支持直接播放m3u8的，于是我找到了xgplayer。

xgplayer默认也是不支持m3u8视频的，需要引入xgplayer-hls插件，代码如下：

import Player, { Events } from "xgplayer";
import HlsPlugin from "xgplayer-hls";
import "xgplayer/dist/index.min.css";

function initPlayer(url: string) {
  const player = new Player({
    id: "app",
    url,
    isLive: false,
    plugins: [HlsPlugin],
  });
}

initPlayer(
  "xxxx"
);

接入后，本地开发一切正常，部署到测试环境后，开始摸鱼了。。。过了一会，测试给我发了个说视频播放错误，我懵逼了，纳尼，我本地都测好了，咋可能会有问题。于是我去测试环境一看，果然有问题。

开始我以为是打包的代码没生效，就重新打了一次包，发现还是有问题，我又怀疑是浏览器缓存，但是好像缓存清了也没用，然后我就看了一下xgplayer的报错，报错信息如下：

根据这个报错信息我去github上找了有没有类似的issure，果然还是找到了， github.com/bytedance/x…

原来是xgplayer-hls用到了浏览器的cryptoAPI，这个api使用是有限制的，仅在域名为localhost或者https的域名下才能生效，我本地恰好使用Localhost访问的，当然没有问题，测试环境是部署在http域名下的，这个问题就出现了。为了验证，我在本地使用本地ip192.168.1.107访问，果然是有问题的，至此，真相大白。

xgplayer还有一个大坑，就是引入了xgplayer-hls插件后，播放mp4视频就会有问题了，具体表现为：会一直去请求mp4文件，直到浏览器崩溃，期间视频也播放不了。解决问题就是根据.mp4或者.m3u8视频后缀去决定要不要引入xgplayer-hls插件。