'How to play m3u8 playlist in all PC browsers?

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?

http-live-streaming

Solution 1:^[1]

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.

Solution 2:^[2]

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.

Solution 3:^[3]

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.

You will need jquery > 1.7
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>

Solution 4:^[4]

<!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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Haqa
Solution 2
Solution 3	anu
Solution 4	ouflak

'How to play m3u8 playlist in all PC browsers?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]