How to play html5 video play m3U8 on mobile and desktop?

Question

I have HLS m3u8 that plays well on IOS and Android with html5 <video>

But does not play on desktop PC or desktop MAC (Chrome, Firefox)

How to play m3u8 on desktop PCs ?

Is there a streaming format of video that would play both on desktop and mobile ?

Answer 1

take a look on hls.js project at https://github.com/video-dev/hls.js/ it solves exactly this problem.

here's a small sample on how to use it.

<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>

once the manifest is parsed, you can use all the regular events, properties and method of the original html5 video element.

you may find their demo here: https://video-dev.github.io/hls.js/demo/