Plyr + azure media drm protected video

Sadman Sakib 51 Reputation points
2023-04-21T17:35:26.5866667+00:00

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

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

Azure Media Services
Azure Media Services
A group of Azure services that includes encoding, format conversion, on-demand streaming, content protection, and live streaming services.
313 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. brtrach-MSFT 15,786 Reputation points Microsoft Employee
    2023-04-22T03:39:17.56+00:00

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