Neatly Positioned Magazines

    @szefczuk/videojs-shaka

    1.1.3 • Public • Published

    videojs-shaka

    shaka player

    Table of Contents

    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.

    License

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

    Install

    npm i @szefczuk/videojs-shaka

    DownloadsWeekly Downloads

    4

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    255 kB

    Total Files

    33

    Last publish

    Collaborators

    • szefczuk