Example / Sample of HLS Streaming player with video m3u8 with demo

How to embed HLS video player m3u8 video (various streaming methods)

HTTP Live Streaming requires a metadata pointer file called m3u8 (e.g. ‘myvideo.m3u8’). The .m3u8 file is a metafile that can be made with any basic text editor, that acts as options for the device playing back the stream. HTTP Live Streaming, aka HLS, aka adaptive bit rate streaming, can be played back using a pure html5 video embed and no plugins in Chrome. Unfortunately, between desktops / laptops, PCs and Apple, iOS (iphone / ipad), Firefox, Safari, and so much more, embedding for only Google Chrome users will not cover the earth’s population, or for that matter, even your hometown’s browsing public.


So, you’ll need to do some transcoding. Your source video needs to be encoded to HLS. This is a huge pain if you are not setup for some digital asset management, because long form video will generate 1000s of video fragments (approx 1 every 10 seconds for each level of quality you are encoding)


The metafiles and m3u8 file’s job is to to link up the .ts fragments. you’ll also need to find a HLS player for the web. If, like most, you already have enough to do, consider hiring GravityLab to handle it for you..


But until you outsource it to us, here’s a jwplayer example of HTTP Live Streaming with htm5 rollover to mp4 and WebM:


Demo #1: How to Embed HLS / M3u8 Streaming: Demo of M3u8 / HLS embedding with HTML5 rollover

Your device cannot play this video.

<div id='sk1' align="center" style="padding-left: 100px; padding-top:35px;"><a href="http://cdn.gravlab.net/sparse/v1d30/2013/merry-christmas/FINAL-happy-holidays.mp4">... Load the video manually ...</a></div><script type='text/javascript'>
playlist:[{   image: "http://img.gravlab.com/003119/sparse/v1d30/pages/928x522-nighsky-player-image.jpg",
        title: "Welcome to Gravitylab",
sources:[{ file:"http://cdn.gravlab.net/sparse/v1d30/2013/nightskyHLS/Lapse2.m3u8" },
            { file:"http://cdn.gravlab.net/sparse/v1d30/2013/pages/lapse2_896x504.mp4" },
			{ file:"http://cdn.gravlab.net/sparse/v1d30/2013/pages/lapse.webm" }]
{ image:"",
sources:[{ file:"http://cdn.gravlab.net/sparse/v1d30/2013/merry-christmas/at3am/takemehometon1ght.m3u8" },
            { file:"http://cdn.gravlab.net/sparse/v1d30/2013/merry-christmas/FINAL-happy-holidays.mp4" },
			{ file:"http://cdn.gravlab.net/2013/merry-christmas/20131225-happy-holidays_WebM_1000k.webm" }]
width: "100%",
aspectratio: "16:9",
ga:{},abouttext:"2013 / 2014 Gravitylab: Click here and learn More", aboutlink:"http://www.gravlab.com/standard.html" })</script>


Demo #2: m3u8, Apple HLS, HTTP Live Streaming with HTML5 & schema.org metadata


1. You’ll need a m3u8 metafile that points at your .ts HTTP Live Streaming files. Here’s an example of what a .m3u8 file looks like ( …or you can even make playlists out of m3u8 files, if you need to have multiple m3u8 / HLS video files loaded from a single player )


Demo Example #2: How to embed m3u8 with HTML5 video & flowplayer with schema.org markup for SEO


<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="T1M33S" />
<meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
<div class="player_rtmp" style="width: 624px; height: 260px;" data-rtmp="rtmp://stream.blacktrash.org/cfx/st/">
    <video id="player_rtmp" class="flowplayer" controls width="624" height="260" preload="metadata">
        <source type="application/x-mpegURL" src="http://media.blacktrash.org/stsp.m3u8"/>
        <source type="video/x-flv" src="mp4:stsp"/>


The above HTTP Live Streaming embed example uses the video tag. It would be easy to add a rollover that failing m3u8 / HLS playback then tries h264 mp4, followed by WebM.


More embed methods for HLS / Player M3u8

Here’s what the next embed example does when your audience / user presses play behind the scenes and automatically:


  • 1. HTTP Live Streaming ranging from 1280×720 to 512×288

  • 2. mpeg2 .ts chunks transcoded at baseline 3.1, 64K AAC2
  • … device can’t play m3u8 via flash ? if not then:
  • a. play video via m3u8 metafile

  • 3. if not then rollover ->
  • &nbsp

  • 4. Rollover to Adaptive bitrate h264 mp4, (with 3 quality mp4 levels). The 3 quality levels (‘bitrate switching’) are accomplished via .smil meta file; streamed via rtmp protocol using Flash Media Server

  • 4a. If Device can’t stream mp4 via rtmp? then:
  • &nbsp

  • 5. Rollover to HTML5 mp4 or webm embed


As added bonus for you here, video embed is wrapped in schema.org video markup in the only way that made sense to me for jwplayer inline. If someone has a different tactic for inline schema tagging with jwplayer, love to hear it! Press play to take a look, the ‘HD’ button in the lower right shows show all the resolutions this video has been transcoded to.


Apple HTTP Live Streaming embedded player example using JWplayer.

Here’s the raw embed code, and you would need JWPlayer’s commercial license to play back HLS. It’s worth the upgrade.


<div id="player001"></div>
<script type="text/javascript">
width: "100%",
aspectratio: "16:9",
abouttext:"2013 / 2014 Gravitylab: Click here and learn More",


49 karma points