Video.js Player

Table of Contents

Integrating Video.js Player with Axinom DRM
Revision History

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

Add a video element in the HTML page. with an id or a class to capture the element.
```
    <video id="video" > </video>
```

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>

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>
```
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);
```
Initialize the eme plugin.
```
    player.eme();
```

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"
                }
            }
        }
    });

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.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjQ1ODc2N2QtYTgzYi00MWQ0LWFlNjgtYWNhNzAwZDNkODRmIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiZXhwaXJhdGlvbl9kYXRldGltZSI6IjIwMjEtMDgtMTFUMDY6NTA6NDQuNTg1KzAwOjAwIiwiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWUsInJlYWxfdGltZV9leHBpcmF0aW9uIjp0cnVlfSwiY29udGVudF9rZXlfdXNhZ2VfcG9saWNpZXMiOlt7Im5hbWUiOiJQb2xpY3kgQSIsIndpZGV2aW5lIjp7ImRldmljZV9zZWN1cml0eV9sZXZlbCI6IlNXX1NFQ1VSRV9DUllQVE8ifX1dLCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmYTEyODBjNi05OTBlLTBmYWItMjFiMC1kYTU4ODlhMDUzMmMiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9LHsiaWQiOiJiMTE0OTJjMi1kZGNmLTI4YmUtMTQwMC01NjZiZmI4MmEyNDMiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9LHsiaWQiOiI2OTUzNWEyYS0zNzc3LTBhNmQtYTFlNi01MGIwZjIxNWE5NTQiLCJ1c2FnZV9wb2xpY3kiOiJQb2xpY3kgQSJ9XX19fQ.ymENIQDMdhApsErNEP5-L10c7iOkni_eDR9d4Nc6NZA "
        }
    }

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.

Version

Date

Description

1.0

September 27, 2021

Initial version.