CODEWITHSUNDEEP
http-live-streaming
sri
sri

Reputation: 3389

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?

Upvotes: 30

Views: 96724

Answers (5)

Abhijit Haldar
Abhijit Haldar

Reputation: 3

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

Upvotes: 0

anu
anu

Reputation: 1007

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>

Upvotes: 2

user6375752
user6375752

Reputation:

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.

Upvotes: 6

Haqa
Haqa

Reputation: 476

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.

Upvotes: 10

Alex Gray
Alex Gray

Reputation: 16463

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

Upvotes: -4

Related Questions