Skip to main content

Video.js Player

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

The general concept for Axinom DRM integration for DRM-compatible players, is outlined in the video Players document.

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

Integration​

  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. In this guide we have used videojs-contrib-eme @version 3.11.1.

        <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. You can find the valid URL for your tenant from My Mosaic area.

        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.axprod.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.axprod.net/AcquireLicense?AxDrmMessage=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWV9LCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmOGM4MGMyNS02OTBmLTQ3MzYtODEzMi00MzBlNWM2OTk0Y2UiLCJlbmNyeXB0ZWRfa2V5IjoiaVhxNDlaODlzOGRDajBqbTJBN1h6UT09IiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19LCJjb250ZW50X2tleV91c2FnZV9wb2xpY2llcyI6W3sibmFtZSI6IlBvbGljeSBBIiwicGxheXJlYWR5Ijp7Im1pbl9kZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOjE1MCwicGxheV9lbmFibGVycyI6WyI3ODY2MjdEOC1DMkE2LTQ0QkUtOEY4OC0wOEFFMjU1QjAxQTciXX19XX19.k9OlwW0rUwuf5d5Eb0iO98AFR3qp7qKdFzSbg2PQj78"
            }
        }

  8. Play the video

        player.play();

Fairplay Specifics​

When you are using Fairplay configurations, it should be added as below.

src: '<HlS content URL>',
keySystems: {
    'com.apple.fps.1_0': {
        certificateUri: '<FPS cert URL>',
        licenseUri: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
        licenseHeaders: {
            'X-AxDRM-Message':
                '<Your Token>',
        },
        getContentId: function (emeOptions, initData) {
            return new TextDecoder().decode(initData.filter(item => item !== 0 && item !== 150))
            },
    },
}

Testing playback.​

  • You can create a script with the above configurations we mentioned.
  • Add your sample content URL, Axinom License token

Then you will be able to see a successful playback.

See also.​