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

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. 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>
```
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.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWV9LCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmOGM4MGMyNS02OTBmLTQ3MzYtODEzMi00MzBlNWM2OTk0Y2UiLCJlbmNyeXB0ZWRfa2V5IjoiaVhxNDlaODlzOGRDajBqbTJBN1h6UT09IiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19LCJjb250ZW50X2tleV91c2FnZV9wb2xpY2llcyI6W3sibmFtZSI6IlBvbGljeSBBIiwicGxheXJlYWR5Ijp7Im1pbl9kZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOjE1MCwicGxheV9lbmFibGVycyI6WyI3ODY2MjdEOC1DMkE2LTQ0QkUtOEY4OC0wOEFFMjU1QjAxQTciXX19XX19.k9OlwW0rUwuf5d5Eb0iO98AFR3qp7qKdFzSbg2PQj78"
        }
    }

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

    src: 'https://media.axprod.net/TestVectors/v9-MultiFormat/Encrypted_Cbcs/Manifest_1080p.m3u8',
	keySystems: {
		'com.apple.fps.1_0': {
			certificateUri: 'https://vtb.axinom.com/FPScert/fairplay.cer',
			licenseUri: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense',
			licenseHeaders: {
				'X-AxDRM-Message':
					'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWV9LCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmOGM4MGMyNS02OTBmLTQ3MzYtODEzMi00MzBlNWM2OTk0Y2UiLCJlbmNyeXB0ZWRfa2V5IjoiaVhxNDlaODlzOGRDajBqbTJBN1h6UT09IiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19LCJjb250ZW50X2tleV91c2FnZV9wb2xpY2llcyI6W3sibmFtZSI6IlBvbGljeSBBIiwicGxheXJlYWR5Ijp7Im1pbl9kZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOjE1MCwicGxheV9lbmFibGVycyI6WyI3ODY2MjdEOC1DMkE2LTQ0QkUtOEY4OC0wOEFFMjU1QjAxQTciXX19XX19.k9OlwW0rUwuf5d5Eb0iO98AFR3qp7qKdFzSbg2PQj78',
			},
			getContentId: function (emeOptions, initData) {
				return new TextDecoder().decode(initData.filter(item => item !== 0 && item !== 150))
		    },
		},

Play the video
```
    player.play();
```

Integrating Video.js Player with Axinom DRM​

Integrating Video.js Player with Axinom DRM