如何从m3u8（HLS）播放视频

Question

我下载了https://pixijs.io/examples/#/sprite/video.js，它当然工作正常。我想玩一个m3u8，例如https://mnmedias.api.telequebec.tv/m3u8/29880.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

我遇到了同样的问题。我无法使用HTML的简单视频标记播放某些m3u8网址。

因此，我发现下面的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