Skip to main content

Basic Playback

Create the Player​

A Player could be built by providing content url and video element or by providing all the options as below

<video id="videoElement" controls></video>
// Sample Player Creation for Drm Content
const videoElement = document.getElementById('videoElement');
const contentUrl =
  'https://storage.googleapis.com/shaka-demo-assets/' +
  'angel-one-widevine/dash.mpd';
const licenseUrl = 'https://cwip-shaka-proxy.appspot.com/no_auth';
const playerBuilder = flPlayer.createPlayerBuilder();
const player = playerBuilder
  .mediaElement(videoElement)
  .mediaUrl(contentUrl)
  .drmLicenseUrl(licenseUrl)
  .drmScheme(flPlayer.DrmScheme.WIDEVINE)
  .mediaType(flPlayer.MediaType.DASH)
  .build();

Subscribe for events​

The application can listen to events such as changes in player state, buffering state, seek state and playback errors by registering a listener/delegate.

player.subscribe('error', function (error) {
  console.log('error', error);
});

player.subscribe('contentloaded', function () {
  console.log('contentloaded');
});

player.subscribe('playbackstatechanged', function (state) {
  console.log('playbackstatechanged', state);
});

Start Playback​

The Player supports following Control Operations :

  • play - Play a paused/loaded content.
  • pause - Pause a Playing content.
  • seek - Seek a content to a specified position in the Playback Window.
danger

Client application developers shouldn't be performing any operations on the underlying raw player. The Player libraries behaviour is undefined, if done so.

Stop & Abort​

  • Invoking stop(), would stop rendering and all underlying resources would be released.
  • Invoking abort(error: Error), would have same effect as stop(). Additionally, Player.Listener#onError() callback will be invoked.
note

abort(error: Error) will be useful when another component (without user intervention) aborts the playback because of some policy restrictions and the appropriate error has to be shown on the UI.