Flowplayer MPEG-DASH plugin - Shaka Player provider

MPEG-DASH Manifest

Notes:

- When using custom MPD, ensure correct CORS directives.

- Default demo MPD is loaded at page loading and contains the following streams:

Video 1: MP4 / H264.

500k@640x272, 1000k@960x408, 1500k@1280x546, 2500k@1280x546, 3000k@1920x818, 3500k@1920x818

Video 2: WEBM / VP9.

500k@640x272, 1000k@960x408, 1500k@1280x546, 2500k@1280x546, 3000k@1920x818, 3500k@1920x818

Audio 1: MP4 / AAC (128k).
Audio 2: WEBM / VORBIS(128k).

Player info

Player engine:

Video type:

Video source:

Video streams

Usage

Basic

The plugins depends on Shaka Player so you must require its script first. Next step is to include Flowplayer followed by the plugin:

<!-- Shaka Player (http://shaka-player-demo.appspot.com/shaka-player.compiled.js) -->
<script src="shaka/shaka-player.compiled.js"></script>
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/6.0.3/flowplayer.js"></script>
<script src="flowplayer.mpegdash.shaka.js"></script>

Then, similarly to the official MPEG-DASH plugin (DASH.js provider), you can reference MPEG-DASH Manifest files as sources for the player:

clip: {
      sources: [
        { 
            type: "application/dash+xml",
            src:  "//s3-eu-west-1.amazonaws.com/krds-mpegdash/sintel/dash/manifest.mpd"
        },
        { 
            type: "application/x-mpegurl",
            src:  "//s3-eu-west-1.amazonaws.com/krds-mpegdash/sintel/hls/multi_bitrate_playlist.m3u8"
        },
        { 
            type: "video/mp4",
            src:  "//s3-eu-west-1.amazonaws.com/krds-mpegdash/sintel/mp4/500.mp4"
        },
        { 
            type: "video/webm",
            src:  "//s3-eu-west-1.amazonaws.com/krds-mpegdash/sintel/webm/500.webm"
        }
    ]
}

Advanced

The below example shows advanced usage including how to interact with the Shaka Player engine.

flowplayer('#vod', {
    embed: false,
    clip: {
      sources: [  
        {
            type: "application/dash+xml",
            src:  "//s3-eu-west-1.amazonaws.com/krds-mpegdash/sintel/dash/manifest.mpd",
            
            shaka: {
                // Called when the player has loaded the manifest.
                onLoad: function() {				
                    // "this" refers to the Shaka Player instance.
                    
                    // Available video tracks
                    console.log( this.getVideoTracks() );

                    // Subscribe to Adaptation events
                    // Ref: http://shaka-player-demo.appspot.com/docs/shaka.media.Stream.html#event:AdaptationEvent
                    this.addEventListener('adaptation', function(adaptation) {								
                        console.log( adaptation );
                    });
                },
                
                // Callback to interpret app-specific DASH ContentProtection elements. 
                // Ref: http://shaka-player-demo.appspot.com/docs/shaka.player.DashVideoSource.html#ContentProtectionCallback
                // Ref: https://github.com/google/shaka-player/blob/master/tutorials/sample4.txt
                contentProtectionCallback: function() {
                
                },
                
                // Custom bandwidth estimator, must implement http://shaka-player-demo.appspot.com/docs/shaka.util.IBandwidthEstimator.html
                // Default to new shaka.util.EWMABandwidthEstimator()
                bandwidthEstimator: function() {
                
                }
            }
        }
      ]
    }
})