Menu
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.
444
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. if you want to play direct . m3u8 (HLS file), then add chrome extension called Native HLS Playback from chrome web app.
If you're looking for a good program to open and use M3U8 files, try VLC, Apple's iTunes, or Songbird. Another way to open this file format on Linux is with XMMS, while Mac users should be able to use CocoModX (in addition to some of the those Windows-compatible programs).
There are actually a few HTML5 players available which are capable of playing back HLS streams. One example would be the Bitmovin Player, which offers professional support as well as a fallback for legacy browsers. It's a commercial product, but they also provides a free plan. Also open-source projects like hls.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
