如何播放m3u8 (HLS)视频

Question

我下载了https://pixijs.io/examples/#/sprite/video.js，当然它工作得很好。不过，我想玩https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8这样的m3u8游戏。我试着用几种不同的方法修改纹理创建：

const texture = PIXI.Texture.from('https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8');
const texture = PIXI.VideoBaseTexture.fromUrl('https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8');
const texture = PIXI.VideoBaseTexture.fromUrl({ src: 'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8', mime: 'application/vnd.apple.mpegurl' });

这些都不起作用(在Windows中使用Chrome )，那么我到底应该如何修改示例程序才能让它播放这个示例m3u8呢？

Answer 1

我也有同样的问题。我无法使用m3u8的简单视频标签播放一些HTML。

因此，我找到了下面的js，它与我的代码工作得很好。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<video id="video"></video>
<script>
  var video = document.getElementById('video');
  if(Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
  }
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('loadedmetadata',function() {
      video.play();
    });
  }
</script>

给出了here的完整文档。

还有一个简短的描述，我想分享有关m3u8文件。M3U8 File