VisualOn Player

VisualOn player (https://www.visualon.com) is a HTML5 based play which allows to play DRM protected content.

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

Integrating VisualOn Player with Axinom DRM

It is easy to integrate VisualOn player with Axinom DRM. Use the sample below to do this. To integrate VisualOn player:

Create a div tag on your HTML page with a preferred id within the HTML body:
```
    <div id ="visualon-player"></div>
```
Embed the player source file into the HTML file. Refer the player SDK file inside the head of the HTML file. To acquire the player SDK file you need to contact the https://www.visualon.com/ .
```
    <script src="<Specify your path>/voplayer.min.js"></script>
```
Embed the player UI source file and the stylesheet acquired by the VisualOn team in your HTML page to get a better view of the player with the player functionalities.
```
    <link href="<Specify your path>/voplayer-ui.min.css?n=1" rel="stylesheet"/>
    <script src="<Specify your path>/voplayer-ui.min.js?n=1"></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.
```
    var container = document.getElementById("visualon-player");
    var player = new voPlayer.Player(container);
```

Add the player configs as preferred and initialize the player.

    var config = {
        playback: {
            autoPlay: true
        }
    };
    player.init(config);

Set the source details. The DRM type, the DRM protected content URL, the license service URL (You can find the valid URL for your tenant from My Mosaic area), the token details should be specified here.

    var source = {
        links: [{
            type: "dash",
            uri: "https://media.axprod.net/TestVectors/v9-MultiFormat/Encrypted_Cbcs/Manifest_1080p.mpd",
            drm: {
                widevine: {
                    laUrl: "https://drm-widevine-licensing.axprod.net/AcquireLicense",
                    headers: { 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWV9LCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmOGM4MGMyNS02OTBmLTQ3MzYtODEzMi00MzBlNWM2OTk0Y2UiLCJlbmNyeXB0ZWRfa2V5IjoiaVhxNDlaODlzOGRDajBqbTJBN1h6UT09IiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19LCJjb250ZW50X2tleV91c2FnZV9wb2xpY2llcyI6W3sibmFtZSI6IlBvbGljeSBBIiwicGxheXJlYWR5Ijp7Im1pbl9kZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOjE1MCwicGxheV9lbmFibGVycyI6WyI3ODY2MjdEOC1DMkE2LTQ0QkUtOEY4OC0wOEFFMjU1QjAxQTciXX19XX19.k9OlwW0rUwuf5d5Eb0iO98AFR3qp7qKdFzSbg2PQj78'}
                }
            }
        }]
    };

The above example contains the configurations needed when using Widevine DRM. If you are using FairPlay DRM, you need to specify the token as a query parameter. Further, you will have to pass the FPS certificate URL to the player. Refer to the below example:

{
    type: 'hls',
    uri: 'https://media.axprod.net/TestVectors/Hls/protected_hls_1080p_h264_singlekey/manifest.m3u8',
    drm: {
        fairplay: {
            laUrl: 'https://drm-fairplay-licensing.axprod.net/AcquireLicense?AxDrmMessage=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICI0MDYwYTg2NS04ODc4LTQyNjctOWNiZi05MWFlNWJhZTFlNzIiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAid3QzRW51dVI1UkFybjZBRGYxNkNCQT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ.l8PnZznspJ6lnNmfAE9UQV532Ypzt1JXQkvrk8gFSRw',
            certificateUrl: 'https://vtb.axinom.com/FPScert/fairplay.cer',
        }
    }
},

note

With the VisualOn Player, there is no need to configure the player specifically to pass the AssetID in the license request as we mentioned here. When the token is provided as a query parameter, the player automatically includes the required AssetID in the license request.

Initialize the configurable UI engine to get a better view of the player with the player functionalities.

    if (voPlayer.UIEngine && player) {
        this.playerUI_ = new voPlayer.UIEngine(player);
        this.playerUI_.buildUI();
    }

Pass the source details to the player and play the video.
```
    player.open(source);
    player.play();
```

VisualOn Player Tool in Portal

Note that under DRM Video Playback, you can actually try out the VisualOn player and check whether your video plays with it. This tool allows you to play the DRM-protected video as well as generate and adjust the Entitlement Message. Copy the video URL, the JWT, and the license acquisition URL and choose VisualOn player from the drop-down menu at the bottom. Click Launch Player to see whether your video plays with the VisualOn player. The player launches in a new tab.

Integrating VisualOn Player with Axinom DRM​

VisualOn Player Tool in Portal​

Integrating VisualOn Player with Axinom DRM

VisualOn Player Tool in Portal