Playing m3u8 Files with HTML Video Tag

html streaming html5-video http-live-streaming m3u8

292,492

Solution 1

Might be a little late with the answer but you need to supply the MIME type attribute in the video tag: type="application/x-mpegURL". The video tag I use for a 16:9 stream looks like this.

<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>

Solution 2

You can use video js library for easily play HLS video's. It allows to directly play videos

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">


<!-- HTML -->
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var player = videojs('hls-example');
player.play();
</script>

GitHub Video Js

Solution 3

The standard html5 video player supports mp4, WebM, 3gp and OGV format directly.

    <video controls>
      <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
      <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
      <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>

We can add an external HLS js script in web application.

    <!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://cdn3.wowza.com/1/ejBGVnFIOW9yNlZv/cithRSsv/hls/live/playlist.m3u8" type="application/x-mpegURL">
      </video>
      
    <script>
    var player = videojs('my_video_1');
    player.play();
    </script>
      
    </body>
    </html>

Solution 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 for desktop: ms edge browser (not working with desktop chrome) and mobile: chrome,opera mini browser.

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

Solution 5

Adding to ben.bourdin answer, you can at least in any HTML based application, check if the browser supports HLS in its video element:

Let´s assume that your video element ID is "myVideo", then through javascript you can use the "canPlayType" function (http://www.w3schools.com/tags/av_met_canplaytype.asp)

var videoElement = document.getElementById("myVideo");
if(videoElement.canPlayType('application/vnd.apple.mpegurl') === "probably" || videoElement.canPlayType('application/vnd.apple.mpegurl') === "maybe"){
    //Actions like playing the .m3u8 content
}
else{
    //Actions like playing another video type
}

The canPlayType function, returns:

"" when there is no support for the specified audio/video type

"maybe" when the browser might support the specified audio/video type

"probably" when it most likely supports the specified audio/video type (you can use just this value in the validation to be more sure that your browser supports the specified type)

Hope this help :)

Best regards!

View more solutions

292,492

Author by

Admin

Updated on May 12, 2021

Comments

Admin almost 3 years
I am trying to use HTTP Live Streaming (HLS) to stream video to my computers and my iPhone. After reading through the Apple 'HTTP Live Streaming Overview' as well as 'Best Practices for Creating and Deploying HTTP Live Streaming Media for the iPhone and iPad', I am a bit stuck.

I took my source file (an mkv) and used ffmpeg to encode the file the MPEG-TS format and Apple-recommended settings and a Baseline 3.0 profile:
```
ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2  -y "output.ts"
```
No worries there. I used a pre-compiled segmenting tool to segment the video and build a .m3u8 playlist. The resultant file looked like this:
```
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST
```
I checked that against some Example Playlist Files for use with HTTP Live Streaming, and I don't see any issues. I also tried playing the .m3u8 file in VLC, and it works like a charm.

I created an HTML page to play the file:
```
<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
            <video width="352" height="288" src="stream.m3u8" controls autoplay>
            </video>
        </div>
    </body>
</html>
```
And this page does not work in Chrome, Safari, on my iPhone. The html5 video tag examples on w3schools work fine on my computer, and the official Apple overview mentioned above gives an HTML example very similar to my page. Nevertheless, my video player is completely unresponsive when I visit my own .m3u8 page.
Mauricio Arias Olave over 7 years

If anyone else has tested this answer, It should be noted that It won't work on Chrome. Works fine in Edge. Check this answer for more information about a solution for browser compatibility.
HeidiWF about 7 years

HLS won't stream in a page on Chrome in just a video tag, as it is not the native browser for HLS.
Rakyesh Kadadas almost 6 years

if you want to play direct .m3u8 (HLS file), then add chrome extension called Native HLS Playback from chrome web app.
OwlR over 5 years

what is api here?
OwlR over 5 years

Nothing is being displayed with above. Why? Commenting out <script> flowplayer(function(api) {... displays media player sceen in browser. Why? Something went wrong withing script tag? Can anybody help here?
smartmouse about 5 years

This solution doesn't work. I tried it on Firefox and Chrome. Even installing Native HLS Playback doesn't do the trick.
Ryan about 4 years

videojs wouldn't play my encrypted HLS video on iOS
Zeeshan Ahmad Khalil about 2 years

It's not playing in edge for me. perhaps its because i am using video-react package