29

By default m3u8 files can be played in Mac Safari browser, but not in any other desktop browsers. What needs to be done to play them in all browsers, both supporting HTML5 and non-HTML5?

Majid
  • 13,853
  • 15
  • 77
  • 113
sri
  • 3,319
  • 7
  • 34
  • 48
  • `m3u8` playlist file is a playlist file that was started by the Nullsoft team for Winamp music player. There are 2 challenges: 1) The file path can be an absolute file that sits locally on a client machine and 2) an absolute URL link to the file located remotely. How will you know if the file contained in the playlist comes from a local file? – Buhake Sindi Jul 17 '14 at 22:53
  • i used flowplayer. it's free and opensource and very easy to use. – anu Jan 02 '17 at 20:56
  • I use Microsoft Edge on windows 10 to stream a m3u8 file. – S Meaden Jul 31 '19 at 01:31

5 Answers5

10

Unfortunately HTML5 support for video is so fragmented that it is, to all intents and purposes, useless (at least as a primary focus) at this point in time. M3U8 playlists are Apple HTTP Live Streaming, and as you can tell from the name, they are (or at least started out as) an Apple standard, no other browser uses them, or HTTP Live Streaming.

There are some programs you can install to add support for HLS. Some companies have, for example, produced HLS players written in Flash, or Silverlight. Yospace has produced a flash SDK for HLS playback which includes a JWPlayer mediaprovider which allows you to use JW's automatic HTML5 fallback on non-flash devices (read: iPhone/iPad), while all others get the JWPlayer experience.

There have been many promises from various companies to "standardize browser video support" but they have all (so far) come to nothing, so whatever option you choose, it's going to be a compromise of sorts.

Haqa
  • 476
  • 3
  • 14
  • `m3u8` is not (nor did it start as) an Apple standard. `m3u` file format started way back in the late 90's as Winamp playlist file and was extended to include longer file names and HTTP files when they enabled online streaming support. I should know this as I started with a very early version of Winamp (probably since it's inception online) and still use it to this very day. – Buhake Sindi Jul 17 '14 at 23:00
  • 3
    While that is true for .m3u files, .m3u8 files are the proprietary Apple extension to the standard as used specifically by their HLS protocol and defined in https://datatracker.ietf.org/doc/draft-pantos-http-live-streaming/ – Haqa Jul 18 '14 at 13:27
  • only the extensions came from Apple but the m3u8 were originally created to allow longer file names. In earlier versions of OS, file names were 8 characters long. Longer file names were not popular or were buggy, especially in Windows 95 and early 98's. Extensions were introduced later by Apple, there I agree with you. – Buhake Sindi Jul 21 '14 at 21:55
  • Is it possible to make HLS formatted videos available to user offline on there browsers? Is it possible to store HLS video in users browser (in Indexed db etc) and then play directly from there (At least for a short term period)? – Vikas Bansal Jul 22 '17 at 07:54
  • In theory it'd may be possible but in practise no browser does this. – Haqa Jul 22 '17 at 22:04
6

Microsoft Edge plays m3u8 files but you must have windows 8 or 10... Just open Microsoft Edge and write the url of the m3u8 file and it will start playing.

2

I used flowplayer. It's very easy to setup and get going and it works on all browsers and is free, unless you want your own branding... (unlike JW player).

Get flow player here Flow Player download

I was successfully able to set up HLS playback by following this demo.

HLS Demo

One thing to note, which the demo does not mention is that.

  1. You will need jquery > 1.7
  2. You will include player's skin CSS in the HTML

Here is my working page that runs HLS, for example:

<!DOCTYPE html>
<html>
   <head>
      <title>Player</title>
      <link rel="stylesheet" href="/client/static/flowplayer-6.0.5/skin/functional.css">
      <script src="/client/static/flowplayer-6.0.5/jquery-1.12.4.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.min.js"></script>
      <script src="/client/static/flowplayer-6.0.5/flowplayer.hlsjs.min.js"></script>
   </head>
   <body>
      <div>
         <h3>Sample Video</h3>
      </div>
      <div id="player">
        <div data-live="false" data-ratio="0.5625" class="flowplayer fixed-controls" data-volume="0" style="max-width: 800px; max-height: 450px;">
            <video data-title="Sample Video">
            <source type="application/x-mpegurl" src="http://:8000/video_cache/d_stream_f7ccc24921ca6123d80d7d1a1a4bfaa1/stream_f7ccc24921ca6123d80d7d1a1a4bfaa1.m3u8">
            </video>
        </div>
         <p hidden id="vid">f7ccc24921ca6123d80d7d1a1a4bfaa1</p>
      </div>
   </body>
</html>
anu
  • 1,017
  • 1
  • 19
  • 36
  • Is it possible to make HLS formatted videos available to user offline on there browsers? Is it possible to store HLS video in users browser (in Indexed db etc) and then play directly from there (At least for a short term period)? – Vikas Bansal Jul 22 '17 at 07:54
  • @VikasBansal Do you mean by setting browser in Offline mode ? – anu Jul 23 '17 at 09:27
  • actually, I have situation where I need to build a feature to make videos available offline. A feature like youtube offline videos but on browser. This is my actual question : https://stackoverflow.com/questions/45252054/how-to-store-hls-m3u8-formatted-video-offline-on-browser-to-play-when-internet – Vikas Bansal Jul 23 '17 at 09:32
  • 1
    @VikasBansal the easiest and best solution is to expose a standard mp4 version of the file available for normal download, and use the m3u8 for streaming – David C Mar 02 '21 at 17:50
0
<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>Your title</title>


    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

</head>

<body>
    <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
    <source src="https://aznbkcstreamer-ukso1.streaming.media.azure.net/c1b3bdd8-2486-4300-89f3-3e4e9eacb57d/GWMAWARDS.ism/manifest(format=m3u8-aapl)" type="application/x-mpegURL">
  </video>

    <script>
        var player = videojs('my_video_1');
        player.play();
    </script>

</body>

</html

Try this, with your playlist/video link. Just change the src link.

ouflak
  • 2,458
  • 10
  • 44
  • 49
Abhijit Haldar
  • 3
  • 3
-4

I don't exactly understand what the deal is with .m3u8 playlists... but I don't particularly like them.. That said, this seems to think it does what you want... github / etianen / html5media

HTML5 video and audio tags make embedding media into documents as easy as embedding an image. All it takes is a single or tag. HTML5 allows you to embed video and audio into your document...

All you have to do is embed a javascript in the of your HTML doc, and some sort of magic, or lack thereof... does the rest..

<script src="/path/to/your/html5media.min.js"></script>

I was able to play .m3u8 movies, streaming from a Wowza server in desktop browsers via a native html5 embed, like...

<video src="video.mp4" width="320" height="240" controls preload></video>

I have NOT, however, yet been able to get them to go "fullscreen" via native HTML controls... but I'm looking into it..

Alex Gray
  • 16,007
  • 9
  • 96
  • 118
  • 2
    However this doesn't answer the OP's question - How can you play M3U8s (That is HTTP Live Streams) in browsers other than Safari for Mac. – Haqa Oct 29 '12 at 14:50