Overview

This tutorial walks you through the main methods for EMP Player’s offline support. After this tutorial you will know how to:

• Download content
• List downloaded content
• Play downloaded content
• Remove downloaded content

Plattform support for download

• Chrome MPEG-DASH unencrypted and encrypted
• Firefox MPEG-DASH unencrypted
• Edge MPEG-DASH unencrypted
• IE11 MPEG-DASH unencrypted

Offline API

Starting Code

Check isSupported to see if offline is supported by the platform

demoPlayer = new empPlayer('player', options, function () { ... });
if(demoPlayer.download().isSupported) {
    //download is supported by the platform.
}

Listen to DOWNLOAD_PROGRESS event

demoPlayer.download().on(empPlayer.Events.DOWNLOAD_PROGRESS, setDownloadProgress);

// Sample with bootstrap progress bar
// https://getbootstrap.com/docs/4.1/components/progress/
var setDownloadProgress = function (event, data) {
  if (data) {
    if (data.progress === 0 || data.progress === 1) {
      $('#progress-group').addClass('hidden');
    }
    else {
      $('#progress-group').removeClass('hidden');
    }
    let newprogress = Math.round(data.progress * 100);
    $('#download-progress').width(newprogress + "%").attr('aria-valuenow', newprogress);
    $('#download-progress').text(newprogress + "%");
  }
}

<div class="progress hidden" id="progress-group">
    <div class="progress-bar" id="download-progress" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

Call startDownload()

Note: Call demoPlayer.download().destroy(); when you done with download.

demoPlayer.download().startDownload(assetId, channelId, programId).then(function (content) {
      console.log('download done', content);
      demoPlayer.download().destroy();
    }).catch(function (error) {
        console.error('download error', error);
        demoPlayer.download().destroy();
    });

Alternative: Call startDownloadSource()

demoPlayer.download().startDownloadSource({
    src : 'https://storage.googleapis.com/shaka-demo-assets/sintel-widevine/dash.mpd', 
    licenseServer : 'https://cwip-shaka-proxy.appspot.com/no_auth'}, { 'name': filename }.
then(function (content) {
      console.log('download done', content);
      demoPlayer.download().destroy();
    }).catch(function (error) {
        console.error('download error', error);
        demoPlayer.download().destroy();
    });

Call startDownload() with usePersistentLicense set to false, default is true

demoPlayer.download().startDownload(assetId, channelId, programId, null, false)

Call startDownload() with custom metadata. (metadata is by default automatic added)

    let myMetadata = { 'name': 'Goldeneye' }
    demoPlayer.download().startDownload(assetId, channelId, programId, myMetadata)

Cancel current download

demoPlayer.download().cancel()

Listing assets in web browser local storage

Note: Call demoPlayer.download().destroy(); when you done with list.

  demoPlayer.download().list().then(function (offLineAssets) {
    for (var i = 0; i < offLineAssets.length; i++) {
      //See also https://shaka-player-demo.appspot.com/docs/api/shakaExtern.html#.StoredContent
      console.log(
        offLineAssets[i].offlineUri + ' ' +
        offLineAssets[i].originalManifestUri + ' ' +
        offLineAssets[i].duration + ' ' +
        offLineAssets[i].size + ' ' +
        offLineAssets[i].expiration + ' ' +
        offLineAssets[i].tracks.length + ' ' +
        offLineAssets[i].appMetadata + ' ' +
        offLineAssets[i].appMetadata.name + ' ' +
        offLineAssets[i].appMetadata.assetId + ' ' +
        offLineAssets[i].appMetadata.channelId + ' ' +
        offLineAssets[i].appMetadata.programId + ' ' +
        offLineAssets[i].appMetadata.title + ' ' +
        offLineAssets[i].appMetadata.subtitle + ' ' +
        offLineAssets[i].appMetadata.images[0].url + ' ' +
        offLineAssets[i].appMetadata.downloaded
      );
    }
    demoPlayer.download().destroy();
  }).catch(function (error) {
    console.error(error);
    demoPlayer.download().destroy();
    });

Start PlayBack of offline asset

See: options

 let options =  { autoplay: true }; //See playback options for EMP player
 demoPlayer.download().load(offlineUri, options);

Remove assset from web browser local storage

 demoPlayer.download().remove(offlineUri).then(function () {
    console.log('assset removed');
    demoPlayer.download().destroy();
  }).catch(function (error) {
    console.error(error);
    demoPlayer.download().destroy();
  });

Remove all asssets from web browser local storage

 demoPlayer.download().deleteAll().then(function () {
    console.log('All asssets removed');
    demoPlayer.download().destroy();
  }).catch(function (error) {
    console.error(error);
    demoPlayer.download().destroy();
  });