Plyr + azure media drm protected video

Question

How to play Azure media drm protected video in Plyr a 3rd party open source video player?

Plyr Github: https://github.com/sampotts/plyr

Answer 1

o play Azure media DRM protected video in Plyr, you need to use the Azure Media Player (AMP) with Plyr. AMP is a video player provided by Microsoft that supports Azure media DRM. You can use Plyr as a skin for AMP to customize the player's look and feel. Here are the steps to use Plyr with AMP:

1. Include the Plyr and AMP libraries in your HTML file:

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" />
<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<script src="https://amp.azure.net/libs/amp/2.3.0/azuremediaplayer.min.js"></script>
<link href="https://amp.azure.net/libs/amp/2.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">

2. Create a video element with a source that points to your Azure media DRM protected video:

<video id="my-video" class="azuremediaplayer amp-default-skin" controls autoplay width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>
    <source src="https://example.com/my-video.ism/manifest(format=mpd-time-csf)" type="application/vnd.ms-sstr+xml" />
</video>

3. Initialize Plyr and AMP on the video element:

const player = new Plyr('#my-video');
const amp = amp('my-video', {
    "nativeControlsForTouch": false,
    "logo": {
        "enabled": false
    },
    "plugins": {
        "azuremediaplayer": {
            "ads": false,
            "drm": {
                "servers": [{
                    "url": "https://example.com/Widevine/?kid=...",
                    "type": "widevine"
                }],
                "advanced": {
                    "audioContentType": "audio/mp4",
                    "videoContentType": "video/mp4",
                    "protectionSystem": "com.microsoft.playready",
                    "persistentLicense": false,
                    "licenseAcquisitionURL": "https://example.com/Widevine/?kid=..."
                }
            }
        }
    }
});

Replace the URLs and parameters with your own. This should allow you to play Azure media DRM protected video in Plyr using the Azure Media Player. Let me know if you have any further questions or if there's anything else I can help you with.