21

I came across this stackoverflow link that talks about playing a m3u8 file: Playing m3u8 Files with HTML Video Tag

I've tried doing something similar to play the video link in the m3u8 file like on phpfiddle: 

    echo '<video width="352" height="198" controls>
<source src="https://udemy-adaptive-streaming-prod.udemy.com/9287/72689/2012-04-30_04-09-49-f5ad53b1736807ee7f8837b37115aeeb/hls/677cda5a7077be8d22348b5edebd77db.m3u8?sign=%252BCIehx2LKCxUcNSU33mWdfm5SbA%253D&mign=EEsJDxEabAoMa1kFRgIfbEkIDw8RHGwKDGtZXAFYS3lHSwgIGEoJUl57U1sfTBQlBTYIFRkNEVlZfVtaAl5Dc15fAQ==&quality=HD" type="application/x-mpegURL"></video>';

But it's not working. It seems to show the video element but the video doesn't get loaded in it. Is it possible to play m3u8 files this way? The m3u8 file that I want to play is inside the "https://www.udemy.com/excel-tutorial/

Thanks for any help.

Community
  • 1
  • 1
vjks
  • 383
  • 1
  • 2
  • 11

3 Answers3

27

Use the JavaScript HLS client hls.js package found on github. Used by many established organizations. Works on all browsers.

A quick example page:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <video id="video" controls></video>
    <script>
    if(Hls.isSupported())
    {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource('playlist.m3u8');
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function()
        {
            video.play();
        });
    }
    else if (video.canPlayType('application/vnd.apple.mpegurl'))
    {
        video.src = 'playlist.m3u8';
        video.addEventListener('canplay',function()
        {
            video.play();
        });
    }
    </script>
  </body>
</html>

Replace 'playlist.m3u8' with your playlist.

James John McGuire 'Jahmic'
  • 11,728
  • 11
  • 67
  • 78
3

In normally html5 video player will support 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>

Hope this useful!

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
Nayana Chandran
  • 1,416
  • 1
  • 16
  • 30
0

A m3u8 file is a HLS manifest, which enables adaptive streaming. To play a HLS stream, you'll need to find a HLS video player in order to play cross-device on every browser. You can even build one yourself, for example with JavaScript.

Alternatively, you can google free HLS players (often lacking in features), or use a commercial HLS player like THEOplayer.

Thijs Lowette
  • 165
  • 5