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

问题

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 ?

回答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.

回答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/

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

回答4:

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

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

回答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/

来源：https://stackoverflow.com/questions/23388135/how-to-play-html5-video-play-m3u8-on-mobile-and-desktop

标签

video-streaming

html5-video

m3u8