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

Question 1

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.

Question 2

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/

Question 3

I know its a bit late for an answer but I was looking for this information and could not find a good answer on stackoverflow...

As far as I know there is no format that works out of the box for mobile and desktop. If you want to save transcoding power and just use one format i recommend HLS since it works perfectly on mobile and you can use free libraries to show the videos in the browser.

https://github.com/videojs/videojs-contrib-hls has a working example with videojs. It uses HTML5 in Safari and falls back to flash on the other browsers. If you have another player in mind check https://github.com/mangui/flashls for more examples

Question 4

<html>
<body>
    <video width="600" height="400" controls>
        <source src="index.m3u8" type="application/x-mpegURL">
    </video>
</body> 
</html>

Stream HLS or m3u8 files using above code. it works to edge browser, chrome,opera mini (mobile browser) (not working with pc chrome)

To play on all browser use flash based media player. media player to support all browser

Question 5

Safari is the only desktop browser that supports HLS.

EDIT: danrossi made a plugin for the flash version of Flowplayer that supports HLS but that's not HTML5. read more here: http://justhackme.wordpress.com/2013/03/10/apples-http-live-streaming-in-flash/