videojs-shaka

shaka player

Table of Contents

• Installation
• Usage
  • <script> Tag
  • Debug
  • DRM
  • qualitytrackchange Event
• Special Thanks
• License

Installation

npm install --save videojs-shaka

Usage

To include videojs-shaka on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/shaka-player.compiled.js"></script>
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-shaka.min.js"></script>
<script>
  var player = videojs('my-video', {
    techOrder: ['shaka'],
    ...
  });
  player.src([{
    type: 'application/dash+xml',
    src: '//path/to/some.mpd'
  }]);
</script>

If you want to enable the bitrate quality picker menu, you'll need to initialize it by calling the qualityPickerPlugin function.

<script>
  var player = videojs('my-video', {
    techOrder: ['shaka'],
    ...
  });

  player.qualityPickerPlugin();
  player.src([{
    type: 'application/dash+xml',
    src: '//path/to/some.mpd'
  }]);
</script>

Debug

Configure DEBUG logging level in the following manner by including the shaka-player.compiled.debug.js on your page (default will be set to ERROR):

<script src="//path/to/shaka-player.compiled.debug.js"></script>
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-shaka.min.js"></script>
<script>
  var player = videojs('my-video', {
    techOrder: ['shaka'],
    shaka: {
      debug: true
      configuration: {
        // shaka player configuration - https://shaka-player-demo.appspot.com/docs/api/tutorial-config.html
      }   
    }
    ...
  });

  player.qualityPickerPlugin();
  player.src([{
    type: 'application/dash+xml',
    src: '//path/to/some.mpd'
  }]);
</script>

Sideloading Subtitles/Captions

There may be times when you have embedded subtitles in your stream, but you want to side load webvtt files into video.js yourself. Just specify sideload: true and the embedded subtitles in the stream will be ignored (default will be set to false).

<script src="//path/to/shaka-player.compiled.debug.js"></script>
<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-shaka.min.js"></script>
<script>
  var player = videojs('my-video', {
    techOrder: ['shaka'],
    shaka: {
      debug: false,
      sideload: true,
      configuration: {
        // shaka player configuration - https://shaka-player-demo.appspot.com/docs/api/tutorial-config.html
      }   
    }
    ...
  });

  player.qualityPickerPlugin();
  player.src([{
    type: 'application/dash+xml',
    src: '//path/to/some.mpd'
  }]);
</script>

DRM

Configure DRM in the following manner:

<script>
  var player = videojs('my-video', {
    techOrder: ['shaka'],
    shaka: {
      configuration: {
        drm: {
          servers: {
            'com.widevine.alpha': 'https://foo.bar/drm/widevine'
          }
        },    
      }
      licenseServerAuth: function(type, request) {
        // Only add headers to license requests:
        if (type == shaka.net.NetworkingEngine.RequestType.LICENSE) {
          // This is the specific header name and value the server wants:
          request.headers['CWIP-Auth-Header'] = 'VGhpc0lzQVRlc3QK';
          // This is the specific parameter name and value the server wants:
          // Note that all network requests can have multiple URIs (for fallback),
          // and therefore this is an array. But there should only be one license
          // server URI in this tutorial.
          request.uris[0] += '?CWIP-Auth-Param=VGhpc0lzQVRlc3QK';
        }
      }
    }
    ...
  });

  player.qualityPickerPlugin();
  player.src([{
    type: 'application/dash+xml',
    src: '//path/to/some.mpd'
  }]);
</script>

If you need to set the DRM server after you initialize video.js prior to loading the source, you can specify a function for shaka.configuration.drm as follows:

<script>
  var player = videojs('my-video', {
    techOrder: ['shaka'],
    shaka: {
      configuration: {
        drm: function() {
          // return the object here like
          return {
            servers: {
              'com.widevine.alpha': 'https://foo.bar/drm/widevine'
            }
          }
        }
      }
    }
    ...
  });

  player.qualityPickerPlugin();
  player.src([{
    type: 'application/dash+xml',
    src: '//path/to/some.mpd'
  }]);
</script>

qualitytrackchange Event

If you would like to know when a user switches video quality, you can register an event listener for qualitytrackchange. The quality track object will be returned to you.

<script>
  player.on('qualitytrackchange', function(event, track) {
    // do something with the track that was selected
  });
</script>

Sample App

To run the sample app, you just need to start the development server with the following command:

$ npm run sample

Then just open the app at http://localhost:3000/

Special Thanks

This library wasn't possible without leveraging the following libraries that were used to create this.

• videojs-shaka-player - https://github.com/MetaCDN/videojs-shaka-player
• videojs-quality-picker - https://github.com/streamroot/videojs-quality-picker/
• videojs-shaka - https://github.com/halibegic/videojs-shaka
• videojs-contrib-dash - https://github.com/videojs/videojs-contrib-dash

License

MIT. Copyright (c) Dave Herzog <davidjherzog@gmail.com>