Skip to main content

VisualOn Player

VisualOn player (https://www.visualon.com) is a universal video player solution that enables online media companies and enterprises to deliver seamless video playback across a wide variety of devices and platforms. VisualOn player supports all major platforms, including web (desktop and mobile), mobile (iOS and Android), TV (tvOS, Android TV, FireTV and SmartTVs), and SetTopBoxes. It plays adaptive media formats such as HLS and MPEG-DASH. By default, VisualOn player supports DRM technologies like FairPlay, Widevine, and PlayReady. With AdFlow and AdFusion, it provides a comprehensive solution for ad insertion, playback, and reporting.

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

Integrating VisualOn players with Axinom DRM is straightforward, as it is already pre-integrated. You can find the specific instructions below.

Integration​

You can find the prerequisites to use a player with Axinom DRM from our Video Players document.

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 https://www.visualon.com/ .

        <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.

note

Specifying this UI file is not required. We have added it to the guide since we are talking about the minimulistic player here. This UI file is only for customer reference. You can also customize your own UI according to the VisualOn HTML5+ Player API Manual.

    <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>

  1. 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);

  2. Add the player configs as preferred and initialize the player.

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

  3. 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'}
                    }
                }
            }]
        };

    This example contains the configurations needed when using Widevine DRM.

  4. 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();
        }

  5. Pass the source details to the player and play the video.

        player.open(source);
        player.play();

Fairplay Specifics​

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.

Testing playback​

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.

You can find the tool here:

DRM Video Playback Tool

See also​