EMP Html5 Player 2

Getting started

Using EMP Player

For deeper knowledge of the player, read more here Video.js docs

Shaka player for MPEG-DASH

The easiest way of creating an EMP player is using the emp-player-all.min.js bundle (that includes video.js, emp-player.js, emp-shaka.js, emp-hls.js and emp-cast-sender.js) and adding video.js and emp-player style sheets to your html file:

    <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>

EMP player uses a modular architecture that allows you to choose the modules you need.

    <link rel="stylesheet" href="video-js/video-js.css">
    <link rel="stylesheet" href="css/emp-player.css" />
    
    <script src="video-js/video.js"></script>
    <script src="js/emp-player.js"></script>
    <!-- Techs -->
    <script src="emp/js/emp-shaka.js"></script>
    <script src="emp/js/emp-hls.js"></script>
    <script src="emp/js/emp-hls-mse.js"></script> 
    <script src="emp/js/emp-cast-sender.js"></script>

emp-entitlement.js and emp-analytics.js are bundled in emp-player.js and don't need to be added separately.

Read more about modules

You create a new player instance by calling empPlayer constructor with the following arguments:

  • DOM <video> element ID
  • Options object
  • Ready Callback function
demoPlayer = new empPlayer('player', options, function () { ... });

Getting References to Players

Once players are created, EMP-Player keeps track of them internally. There are a few ways to get references to pre-existing players.

Using empPlayer

Calling empPlayer() with the ID of element of an already-existing player will return that player and will not create another one.

If there is no player matching the argument, it will attempt to create one.

Using empPlayer.getPlayer()

Sometimes, you want to get a reference to a player without the potential side effects of calling empPlayer(). This can be achieved by calling empPlayer.getPlayer() with either a string matching the element's ID or the element itself.

Using empPlayer.getPlayers() or empPlayer.players

The empPlayer.players property exposes all known players. The method, empPlayer.getPlayers() simply returns the same object.

Players are stored on this object with keys matching their IDs.

Note: A player created from an element without an ID will be assigned an automatically-generated ID.

Options

Note: This guide only covers how to pass options during player setup. For a complete reference on all available options, see the options guide.

There are three ways to pass options to emp-player. Because emp-player decorates an HTML5 <video> element, many of the options available are also available as standard video tag attributes:

<video controls autoplay preload="auto" ...>

Alternatively, you can use the data-setup attribute to pass options as JSON. This is also how you would set options that aren't standard to the <video> element:

<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>

Note: You must use single-quotes around the value of data-setup as it contains a JSON string which must use double quotes.

Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object of player options as the second argument to the videojs function:

empPlayer('my-player', {
  controls: true,
  autoplay: false,
  preload: 'auto'
});

Note: Do not use both data-setup and an options object.


Login and start playback with chromecast enabled

To play a stream from EMP, you need to get a sessionToken from Exposure.

Here's how you login, get a sessionToken and start playing:

let options = {
     'ericssonexposure': {
        'customer': 'TestGroup',
        'businessUnit': 'Test',
        'exposureApiURL': 'https://test.ebsd.ericsson.net'
    },
}
let exposure = empPlayer.getExposure(options.ericssonexposure);
exposure.login('user', 'pw', function (response) {
    if (response.success) {
        options.ericssonexposure.sessionToken = response.session.sessionToken;
        options['controlBar'] = {
            'chromeCastButton': {
                'appId': 'E5A43176'
            }
        };
        demoPlayer = new empPlayer('#video', options);
        demoPlayer.src({ src: '{"channelId":"750837_qwerty"}', type: 'video/emp' });
    }
});

Read more about entitlement and exposure

Playback method 1

Start playback with startPlayback() method. It's the recommended way to play EMP streams.

var myPlayer = empPlayer('some-video-element-id');


myPlayer.startPlaybackV2(assetId, playbackProperties);
or
myPlayer.startPlayback(assetId, channelId, programId, playbackProperties);

playbackProperties: {
      playFrom: 'defaultBehaviour', // default
      autoplay: true, // default
      startTime: 1523547616290, //start stream from unixTime (ms)
      startOffset: 0, //start stream from stream-start + millisecond of startOffset
    }

startPlayback

  • assetId Identifier of the asset to load (VOD_ASSET, CHANNEL_ASSET OR PROGRAM_ASSET)
  • channelId (optional) Identifier of the channel to load
  • programId (optional) Identifier of the program to load (channelId is mandatory with programId).
  • playbackProperties (optional) Playback properties

playFrom

  • defaultBehaviour Live program starts from live point, catchup and VoD start from start of the program.
  • startTime Start playback from startTime or startOffset
  • bookmark Start playback from last viewed offset (obtained from the entitlement play response)
  • beginning Start playback from beginning of the program

autoplay

  • true: autoplay using the browser behavior
  • false: do not autoplay
  • 'play': call play() on every loadstart
  • 'muted': call muted() then play() on every loadstart
  • 'any': call play() on every loadstart. if that fails call muted() then play().
  • *: values other than those listed here will be set autoplay to true

Playback method 2

Start playback with videojs src() method. Note: It's also applicable with html <video> <source> element.

var myPlayer = empPlayer('some-video-element-id');
myPlayer.src('http://www.example.com/path/to/video.mp4');

myPlayer.src({'type': 'video/mp4', 'src': 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'});
myPlayer.src({'type': 'application/x-mpegURL', 'src': 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8'});
myPlayer.src({'type': 'application/dash+xml', 'src': 'https://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.mpd'});
myPlayer.src({'type': 'video/emp', 'src': 'my_assetId', });
myPlayer.src({'type': 'video/emp', 'src': {'channelId':'750837_qwerty', 'programId': '122345'}});

Source Object (or element): A javascript object containing information about the source file. Use this method if you want to add DRM settings.

myPlayer.src({ src: myStreamUrl, type: sourcetypeForStream, playToken: myPlayToken, licenseServer: myLicenseServerUrl, keySystems: listOfkeySystems,  certificateServer: myCertificateServerUrl });

keySystems: {
      com.widevine.alpha: 'https://foo.bar/drm/widevine',
      com.microsoft.playready: 'https://foo.bar/drm/playready'
      com.apple.fps: 'https://foo.bar/drm/fairplay',
      com.apple.fps.2_0: 'https://foo.bar/drm/fairplay',
      com.apple.fps.1_0: 'https://foo.bar/drm/fairplay',
      com.adobe.primetime: 'https://foo.bar/drm/primetime'
      org.w3.clearkey: 'https://foo.bar/drm/clearkey',
    }

Javascript object members for the src method

  • src stream url, assetId or javaScript object {assetId:, channelId:, programId:}
  • type stream type ['video/mp4', 'application/x-mpegURL', 'application/dash+xml', 'video/emp'] 'video/emp' should be used for EMP streams. Default
  • playToken optional authentication header when fetch drm license
  • licenseServer optional licenseServer url (one url for all keySystems)
  • keySystems optional Javascript object with keySystems
  • certificateServer optional certificateServer url for Fairplay DRM

Array of Source Objects: EmpPlayer will detect which type is supported and play video source in sequence.

myPlayer.src([
  {type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"},
  {type: "application/x-mpegURL", src: "http://www.example.com/path/to/playlist.m3u8"}
  {type: "video/emp", src: "npa2_qwerty"}
]);

Automatic Setup for anonymous login

<html>
<!-- Minimal html for anonymous login and play EMP stream  -->
<head>
    <link href="video-js/video-js.css" rel="stylesheet">
    <link href="css/emp-player.css" rel="stylesheet">
    <script src="js/emp-player-all.js"></script>
</head>
<body>
    <video id="video" controls autoplay width="640" height="264"
           class="video-js vjs-default-skin vjs-big-play-centered vjs-show-big-play-button-on-pause"
           data-setup='{"ericssonexposure": {
            "customer": "KattTV",
            "businessUnit": "Katt",
            "exposureApiURL": "YourApiURL"}}'>
        <source src='{"assetId":"redbee_7FDB50"}' type="video/emp">
    </video>
</body>
</html>

Player members

emp-player supports videojs player members.

Plus we have added extra members emp-player members for a richer functionality.

Type definitions (ts) for emp-player


peer-to-peer plugin for MPEG-DASH (Streamroot)

EMP player support peer-to-peer streaming with Streamroot.
You need Shaka tech to use peer-to-peer streaming.

  • Add the Streamroot modules to your HTML file:
<!-- Streamroot plugin -->
<script src="//cdn.streamroot.io/shakaplayer-dna-wrapper/1/stable/shakaplayer-dna-wrapper.js"></script>
  • Add the your Streamroot_key to player options
options.empshaka.streamrootkey = "YOUR_STREAMROOT_KEY"