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

video-streaming html5-video m3u8
yarek picture yarek · Apr 30, 2014 · Viewed 66.8k times · Source

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

Roey picture Roey · Nov 13, 2017

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/

Related questions

HTML5 live streaming

For school I need to set up an HTML5 live stream site. They have a flash stream-player they've been using but now they want it to use HTML5 instead. How can I do this? I tried using the video tag …

Read More
Play infinitely looping video on-load in HTML5

I'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either …

Read More
HTML5 Video Autoplay not working correctly

Im using this code: <video width="440px" loop="true" autoplay="true" controls> <source src="http://www.example.com/CorporateVideo.mp4" type="video/mp4" /> <source src="http://www.example.com/CorporateVideo.ogv" type="video/ogv" /> &…

Read More