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

VisualOn Player

VisualOn player 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:

  1. Create a div tag on your HTML page with a preferred id within the HTML body:

        <div id ="visualon-player"></div>
  2. 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 [Visual On support team].

        <script src="<Specify your path>/voplayer.min.js"></script>
  3. 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>
  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.

        var container = document.getElementById("visualon-player");
        var player = new voPlayer.Player(container);
  5. Add the player configs as preferred and initialize the player.

        var config = {
            playback: {
                autoPlay: true
            }
        };
        player.init(config);
  6. Set the source details. The DRM type, the DRM protected content URL, the license service URL, 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.axtest.net/AcquireLicense",
                        headers: { 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsInZlcnNpb24iOjIsImxpY2Vuc2UiOnsiYWxsb3dfcGVyc2lzdGVuY2UiOnRydWV9LCJjb250ZW50X2tleXNfc291cmNlIjp7ImlubGluZSI6W3siaWQiOiJmOGM4MGMyNS02OTBmLTQ3MzYtODEzMi00MzBlNWM2OTk0Y2UiLCJlbmNyeXB0ZWRfa2V5IjoiaVhxNDlaODlzOGRDajBqbTJBN1h6UT09IiwidXNhZ2VfcG9saWN5IjoiUG9saWN5IEEifV19LCJjb250ZW50X2tleV91c2FnZV9wb2xpY2llcyI6W3sibmFtZSI6IlBvbGljeSBBIiwicGxheXJlYWR5Ijp7Im1pbl9kZXZpY2Vfc2VjdXJpdHlfbGV2ZWwiOjE1MCwicGxheV9lbmFibGVycyI6WyI3ODY2MjdEOC1DMkE2LTQ0QkUtOEY4OC0wOEFFMjU1QjAxQTciXX19XX19.k9OlwW0rUwuf5d5Eb0iO98AFR3qp7qKdFzSbg2PQj78'}
                    }
                }
            }]
        };
  7. 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();
        }
  8. 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.

Revision History

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

Version Date Description

1.0

October 1, 2021

  • Initial version.