Flowplayer · MPEG-DASH support

VOD

player engine:

video type:

video source:

MPEG-DASH is an experimental technique for adaptive bitrate streaming.

Browser implementations of MPEG-DASH rely on the MediaSource-feature of browsers and the MediaSource implementation must support the AVC video and AAC audio codecs at the profile and level the MPEG-DASH streams are encoded; additionally dash.js (see below) must be able to handle the stream in the browser. Your browser: .

To use MPEG-DASH with Flowplayer you need to use the MPEG-DASH engine plugin which is packed with a compatibility tested version of dash.js from the Dash Industry Forum.

Source picking order

MPEG-DASH (dynamic resolution switching): Chrome, Internet Explorer 11, Mac OS Safari, Opera

HLS (dynamic resolution switching): most mobile devices, desktop browsers with Flash enabled

WEBM (fallback)

MP4 (fallback)

Caveat: In Mac OS Safari the video does not finish properly. We are investigating whether this is a bug in Safari and can be worked around. For the time being you can circumvent this with the following source order in the clip configuration if you have a HLS stream available:

clip: {
  sources: [
    // 1. try generic HLS (Mac OS Safari)
    { type: "application/x-mpegurl",
      src:  "//stream.flowplayer.org/drive.m3u8",
      engine: "html5" },
    // 2. MPEG-DASH
    { type: "application/dash+xml",
      src:  "//d12zt1n3pd4xhr.cloudfront.net/fp/drive.mpd" },
    // 3. Flash HLS
    { type: "application/x-mpegurl",
      src:  "//stream.flowplayer.org/drive.m3u8" },
    { type: "video/webm",
      src:  "//stream.flowplayer.org/drive.webm" },
    { type: "video/mp4",
      src:  "//stream.flowplayer.org/drive.mp4" }
  ]
}

JavaScript

Live

MPEG-DASH live stream simulation.

<head/>

<style>

.flowplayer.is-splash,
.flowplayer .fp-message {
  background-color: #bbb;
}
#dashvod {
  background-image: url(//flowplayer.org/media/img/drive/home/drive-shoot.jpg);
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  background-size: auto 100%;
}
@media(-webkit-min-device-pixel-ratio: 2) {
  #dashvod {
    background-image: url(//flowplayer.org/media/img/drive/home/drive-shoot@2x.jpg);
  }
}

CSS

<script>

The following JavaScript assets are loaded in the HEAD section of the page:

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.3/flowplayer.min.js"></script>
 
<!-- load the Flowplayer mpegdash engine, including dash.js -->
<script src="//releases.flowplayer.org/mpegdash/flowplayer.mpegdash.min.js"></script>

HTML

Then the player can be installed as usual, with an additional MPEG-DASH source:

window.onload = function () {
 
  flowplayer("#dashvod", {
    splash: true,
    embed: false, // setup would need iframe embedding
    ratio: 9/16,
    clip: {
      sources: [
        { type: "application/dash+xml",
          src:  "//d12zt1n3pd4xhr.cloudfront.net/fp/drive.mpd" },
        { type: "application/x-mpegurl",
          src:  "//stream.flowplayer.org/drive.m3u8" },
        { type: "video/webm",
          src:  "//stream.flowplayer.org/drive.webm" },
        { type: "video/mp4",
          src:  "//stream.flowplayer.org/drive.mp4" }
      ]
    }
 
  }).on("ready", function (e, api, video) {
    // info for demo purposes
    document.getElementById("engine").innerHTML = api.engine.engineName;
    document.getElementById("vtype").innerHTML = video.type;
    document.getElementById("src").innerHTML = video.src;
 
  });
 

  var livecontainer = document.getElementById("dashlive");
  flowplayer(livecontainer, {
    ratio: 9/16,
    splash: true,
    clip: {
      live: true,
      sources: [
        { type: "application/dash+xml",
          src:  "http://54.201.151.65/livesim/tfdt_32/testpic_6s/Manifest.mpd" }
      ]
    }
 
  }).on("error", function (e, api, err) {
    if (err.code == 5) {
      // customize error as this is not a production scenario
      livecontainer.querySelector(".fp-message h2").innerHTML =
          "Test stream only available as MPEG-DASH";
      livecontainer.querySelector(".fp-message p").innerHTML =
          "Please try in a different browser";
    }
 
  });
 
};

JavaScript

<body/>

<div id="dashvod"></div>
 
<!-- ... -->
 
<div id="dashlive"></div>

HTML