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

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/

HLS will only work on desktop in Mac OS Safari 6+. Have a look here for reference.

For HTML5 video on desktop you can think about using MPEG DASH. It has a JS lib that works both live and on demand with the following browsers:

As of 8/30/13, Desktop Chrome, Desktop Internet Explorer 11, and Mobile Chrome Beta for Android are the only browsers supported.

If you want wider browser/device coverage with adaptive streaming technology you will need to consider using Flash which supports RTMP and HDS or Silverlight with Smooth Streaming (Flash has better coverage I should say).

Most media companies today uses an hybrid approach Flash (HDS/RTMP - desktop) / HTML5 (HLS - mobile) checking with JavaScript beforehand on the device what can be read and delivering the appropriate player/streaming protocol as a result.

FYI you can play HLS stream with software like VLC on Windows desktop.