Playing m3u8 Files with HTML Video Tag

Question

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    lt html lang  en  gt       lt head gt           lt meta charset utf-8  gt       lt  head gt       lt body gt           lt div id  player  gt               lt video width  352  height  288  src  stream m3u8  controls autoplay gt               lt  video gt           lt  div gt       lt  body gt   lt  html gt    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

User · Answer

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>

User · Answer

lt html gt   lt body gt       lt video width  quot 600 quot  height  quot 400 quot  controls gt           lt source src  quot index m3u8 quot  type  quot application x-mpegURL quot  gt       lt  video gt   lt  body gt     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

User · Answer

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

User · Answer

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    lt video width  352  height  198  controls gt       lt source src  playlist m3u8  type  application x-mpegURL  gt   lt  video gt

User · Answer

Use Flowplayer    lt link rel  stylesheet  href    releases flowplayer org 7 0 4 commercial skin skin css  gt       lt style gt       lt  style gt      lt script src    code jquery com jquery-1 12 4 min js  gt  lt  script gt     lt script src    releases flowplayer org 7 0 4 commercial flowplayer min js  gt  lt  script gt     lt script src    releases flowplayer org hlsjs flowplayer hlsjs min js  gt  lt  script gt      lt script gt    flowplayer function  api        api on  load   function  e  api  video              vinfo   text api engine engineName     engine playing     video type                  lt  script gt    lt div class  flowplayer fixed-controls no-toggle no-time play-button obj        style      width  85 5       height  80       margin-left  7 2       margin-top  6       z-index  1000   data-key   812975748999788  data-live  true  data-share  false  data-ratio  0 5625   data-logo    gt         lt video autoplay  true  stretch  true  gt             lt source type  application x-mpegurl  src  http   live wmncdn net safaritv2 live2 stream index m3u8  gt         lt  video gt         lt  div gt    Different methods are available in flowplayer org website

User · Answer

You can use video js library for easily play HLS video s  It allows to directly play videos    lt  -- CSS  -- gt    lt link href  https   vjs zencdn net 7 2 3 video-js css  rel  stylesheet  gt     lt  -- HTML -- gt   lt video id  hls-example   class  video-js vjs-default-skin  width  400  height  300  controls gt   lt source type  application x-mpegURL  src  http   www streambox fr playlists test 001 stream m3u8  gt   lt  video gt     lt  -- JS code -- gt   lt  -- If you d like to support IE8  for Video js versions prior to v7  -- gt   lt script src  https   vjs zencdn net ie8 ie8-version videojs-ie8 min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs videojs-contrib-hls 5 14 1 videojs-contrib-hls js  gt  lt  script gt   lt script src  https   vjs zencdn net 7 2 3 video js  gt  lt  script gt    lt script gt  var player   videojs  hls-example    player play     lt  script gt    GitHub Video Js

[html] Playing m3u8 Files with HTML Video Tag

Examples related to html

Examples related to streaming

Examples related to html5-video

Examples related to http-live-streaming

Examples related to m3u8