Mosaic products documentation: Concepts, API Reference, Technical articles, How-to, Downloads and tools

Video.js Player

Video.js is a web video player which supports HTML5 video.

Video.js player can be easily integrated with Axinom DRM. You can find the specific instructions below.

Integrating Video.js Player with Axinom DRM

  1. Add a video element in the HTML page. with an id or a class to capture the element.

        <video id="video" > </video>
  2. Embed the player source file into the HTML file. Add the following script to the HTML file.

        <script type="text/javascript" src="<CDN path to the minified script>/video.min.js"></script>
  3. Embed the eme file into the HTML file to access the API that enables web applications to interact with content protection systems, to allow playback of encrypted audio and video.

        <script src="<your path after `npm i videojs-contrib-eme`>/videojs-contrib-eme.min.js"></script>
  4. Initialize a new instance of the player by adding the following line inside your loader method which is executed when you load the player.

        videoEl = document.getElementById('video');
        player =videojs(videoEl);
  5. Initialize the eme plugin.

        player.eme();
  6. Pass the DRM protected content and the license URL details to the player. The example below passes the token in the header.

        player.src({
            src: "https://media.axprod.net/TestVectors/v9-MultiFormat/Encrypted_Cbcs/Manifest_1080p.mpd",
            type: 'application/dash+xml',
                keySystems: {
                    'com.widevine.alpha': {
                    url: "https://drm-widevine-licensing.axtest.net/AcquireLicense",
                    licenseHeaders: {
                        "X-AxDRM-Message": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWV9LCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmOGM4MGMyNS02OTBmLTQ3MzYtODEzMi00MzBlNWM2OTk0Y2UiLCJlbmNyeXB0ZWRfa2V5IjoiaVhxNDlaODlzOGRDajBqbTJBN1h6UT09IiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19LCJjb250ZW50X2tleV91c2FnZV9wb2xpY2llcyI6W3sibmFtZSI6IlBvbGljeSBBIiwicGxheXJlYWR5Ijp7Im1pbl9kZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOjE1MCwicGxheV9lbmFibGVycyI6WyI3ODY2MjdEOC1DMkE2LTQ0QkUtOEY4OC0wOEFFMjU1QjAxQTciXX19XX19.k9OlwW0rUwuf5d5Eb0iO98AFR3qp7qKdFzSbg2PQj78"
                    }
                }
            }
        });
  7. To pass the token as a query parameter refer the below example.

        keySystems: {
            'com.widevine.alpha': {
                audioContentType: 'audio/webm; codecs="vorbis"',
                videoContentType: 'video/webM; codecs="vp9"',
                url: "https://drm-widevine-licensing.axtest.net/AcquireLicense?AxDrmMessage=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjQ1ODc2N2QtYTgzYi00MWQ0LWFlNjgtYWNhNzAwZDNkODRmIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiZXhwaXJhdGlvbl9kYXRldGltZSI6IjIwMjEtMDgtMTFUMDY6NTA6NDQuNTg1KzAwOjAwIiwiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWUsInJlYWxfdGltZV9leHBpcmF0aW9uIjp0cnVlfSwiY29udGVudF9rZXlfdXNhZ2VfcG9saWNpZXMiOlt7Im5hbWUiOiJQb2xpY3kgQSIsIndpZGV2aW5lIjp7ImRldmljZV9zZWN1cml0eV9sZXZlbCI6IlNXX1NFQ1VSRV9DUllQVE8ifX1dLCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmYTEyODBjNi05OTBlLTBmYWItMjFiMC1kYTU4ODlhMDUzMmMiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9LHsiaWQiOiJiMTE0OTJjMi1kZGNmLTI4YmUtMTQwMC01NjZiZmI4MmEyNDMiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9LHsiaWQiOiI2OTUzNWEyYS0zNzc3LTBhNmQtYTFlNi01MGIwZjIxNWE5NTQiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9XX19fQ.ymENIQDMdhApsErNEP5-L10c7iOkni_eDR9d4Nc6NZA "
            }
        }
  8. Play the video

        player.play();

Revision History

The table below outlines the document versions and any changes between them.

Version Date Description

1.0

September 27, 2021

  • Initial version.