使用video标签播放m3u8视频

Question

<video width="352" height="198" controls>
    <source src="video.m3u8" type="application/x-mpegURL">
</video>

此代码适用于我的 android 设备上的所有浏览器，但不适用于我计算机上的 Firefox / Chrome / Safari。我需要在所有设备上播放视频。我能做什么？

Answer 1

大多数浏览器本身不支持 HLS。但可以通过 hls.js.

等库播放

Answer 2

这应该很容易工作

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    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();
  });
 }
</script>

使用video标签播放m3u8视频

Playing m3u8 video with video tag

html

streaming

http

video-streaming

http-live-streaming