empplayer2-dev

RED BEE MEDIA

EMP Html5 Player 2

EMP HTML5 player is build on top of Open Source libraries.

• VideoJS
• Shaka player
• hls.js
• dash.js
• hasplayer

VideoJS is an HTML5 video player that we use as a base to create our own player. VideoJS provides us with many common tasks required for modern video players. Including but not limited to

• Video events (such as play, pause, timeupdate)
• Language support
• Plugin support
• Playback Tech support

As such it is encouraged to re-use as much as possible from the VideoJS library. For more information about VideoJS

• github
• documentation
• Homepage

Features

• Support VideoJS features and plugins
• Fast and responsive
• Easy to install and use
• Compatibility quotient across browsers
• Support of RedBee streams and external streams
• Better support of live streaming.
• Support for MPEG-DASH, Smooth Streaming, HLS
• MSE HLS (across browsers)
• DRM Fairplay, Widevine, PlayReady, Clearkey
• Enhanced Chromecast sender/receiver
• Multiple Chromecast senders in sync
• Airplay
• EPG awareness
• Program related progress bar with seamless switching between programs in a channel
• Jump between programs in a channel
• Jump to live
• Live-to-VOD
• Catch-Up-as-Live
• Program and Asset (VOD) change event during playback.
• Line up programs, assets and external streams to be played in sequence
• Playlist for browsers and Chromecast
• Jump between programs, assets and external streams in the playlist
• Pop-up menus for PlaybackRates, Playlist, Bitrates and Tracks in control bar
• Smooth transitions from dynamic manifest to static manifest
• Playback rights from Contract restrictions
• UnixTime playhead
• Play from bookmarks and start of program
• Bitrate control
• PlaybackRate control
• Easier to work with tracks
• Play Event program
• Low latency for Live content (CMAF)
• Picture-in-picture with Safari, Chrome, Firefox and Chromium-Edge
• Peer-to-Peer with Streamroot
• Thumbnail scrubbing based on webVTT file
• Server-side Ad injection
• Multiple audio tracks and subtitles
• TTML Image subtitles
• Subtitle styling dialog
• Download
• Localization
• Fallback to other techs on error
• Third-party skins

Table of Contents

• Quick Start
• Getting Started
• Type definitions
• Release notes
• Hosted documentation and tutorials
• NPM EMP-Player
• Upgrade Guide v1.x to v2.x

Development

If you are a Redbee developer, you can check how to build the development version of the player here

Quick Start

Our releases are done via NPM. You can download the player just by running the following command:

npm install empplayer2

You can then link the javascript files in your webapp and initialize the player. By default, the javascript file you should link from the NPM package is emp-player-all.min.js. For full UI compatibility, you must also include video.js stylesheets in your webapp:

   <link rel="stylesheet" href="video-js/video-js.css">
   <link rel="stylesheet" href="css/emp-player.css" />
   <script src="js/emp-player-all.min.js"></script>

Using EMP-Player is as simple as creating a <video> element, but with an additional data-setup attribute. At a minimum, this attribute must have a value of '{}', but it can include any empPlayer options - just make sure it contains valid JSON!

<video
    id="my-player"
    class="video-js"
    controls
    preload="auto"
    poster="//vjs.zencdn.net/v/oceans.png"
    data-setup='{}'>
     <source src=https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 type=application/x-mpegURL>
     <source src=http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 type=video/mp4>
     <source src="https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd" type="application/dash+xml">
     <source src="my_assetId" type="video/emp">
     <source src='{"channelId":"750837_qwerty", "programId":"122345"}' type="video/emp">
</video>

When the page loads, EMP Player will find this element and automatically setup a player in its place.

If you don't want to use automatic setup, you can leave off the data-setup attribute and initialize a <video> element manually using the empPlayer function:

var player = empPlayer('my-player');

The empPlayer function also accepts an options object and a callback to be invoked when the player is ready:

let options = {};

let player = empPlayer('my-player', options, function onPlayerReady() {
  empPlayer.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  let assetId 	= 'MY_ASSET'; // VOD_ASSET, CHANNEL_ASSET OR PROGRAM_ASSET
  let playbackProperties {
    'playFrom': 'startTime'
    'startTime': 1523547616290
  };
  player.startPlaybackV2(assetId, playbackProperties)

  // How about an event listener?
  player.on('ended', function() {
    empPlayer.log('Awww...over so soon?!');
  });
});

let options = {};

let player = empPlayer('my-player', options, function onPlayerReady() {
  empPlayer.log('Your player is ready!');

  // In this context, `this` is the player that was created by Video.js.
  let assetId 	= 'MY_ASSET_ID_OR_NULL';
  let channelId = 'MY_CHANNEL_ID_OR_NULL';
  let programId = 'MY_PROGRAM_ID_OR_NULL';
  let playbackProperties {
    'playFrom': 'startTime'
    'startTime': 1523547616290
  };
  player.startPlayback(assetId, channelId, programId, playbackProperties)

  // How about an event listener?
  player.on('ended', function() {
    empPlayer.log('Awww...over so soon?!');
  });
});

Note that in order for the playback to work, you need to pass the proper exposure options (as descrebed here). This is because every EMP asset has an entitlement associated to it, and that entitlement needs to be validated in our backend before the playback starts.

If you're ready to dive in, the Getting Started page and documentation are the best places to go for more information.