Skip to main content

Radiant Media Player

Radiant Media Player(https://www.radiantmediaplayer.com) is a cross-device HTML5 video & audio player which allows to play DRM protected content.

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

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

Integration​

  1. Embed the player source file into the HTML file. Add the following script inside the head of the HTML file.

        <head>
            <script src="https://cdn.radiantmediatechs.com/rmp/9.15.0/js/rmp.debug.js"></script>
        </head>

  2. Create a div container with a unique id. So the video and UI elements will be appended to this container.

        <div id="rmp"></div>

  3. Pass your media URL.

            const src = {
                dash: 'https://media.axprod.net/TestVectors/Cmaf/protected_1080p_h264_cbcs/manifest.mpd'
            };

  4. Acquire a license key from Radiant media player through https://www.radiantmediaplayer.com/free-trial.html

        licenseKey: 'Your-Radiant-media-player-license-key',

  5. Specify the license server URL.

        shakaDrm: {
            servers: {
                'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.net/AcquireLicense'
            }
        },

  6. Specify the license token.

        shakaRequestConfiguration: {
                    license: {
                        headers: {
                            'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ._NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M'
                        }
                    }
                }

  7. Reference the div container.

        const elementID = 'rmp';

  8. Create an object based on RadiantMP constructor.

        const rmp = new RadiantMP(elementID);

  9. Initialize the player.

        rmp.init(settings);

    Also you can refer to https://www.radiantmediaplayer.com/guides/working-with-axinom-drm.html for further reading.

  10. Example code.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>RMP</title>
</head>

<body>
    <!-- Include Radiant Media Player JavaScript library -->
    <script src="https://cdn.radiantmediatechs.com/rmp/9.15.0/js/rmp.debug.js"></script>

    <!-- Add a div container with a unique id -->
    <div id="rmp"></div>
    <!-- Set up player configuration options -->
    <script>
        const src = {
            dash: 'https://media.axprod.net/TestVectors/Cmaf/protected_1080p_h264_cbcs/manifest.mpd'
        };
        const settings = {
            licenseKey: 'Your-Radiant-media-player-license-key',
            src: src,
            width: 640,
            height: 360,
            shakaDrm: {
                servers: {
                    'com.widevine.alpha': 'https://drm-widevine-licensing.axtest.net/AcquireLicense'
                }
            },
            shakaRequestConfiguration: {
                license: {
                    headers: {
                        'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ._NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M'
                    }
                }
            }
        };

        <!-- Reference the div container-->
        const elementID = 'rmp';

        <!-- Create an object based on RadiantMP constructor-->
        const rmp = new RadiantMP(elementID);

        <!-- Player initialisation only after API events are registered -->
        rmp.init(settings);
    </script>

</body>

</html>

Test playback​

You can create your own script or use the above sample code. Once you run the script, you will be able to experience the playback of the media you have added.

See also​