JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Azure Media Player</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--*****START OF Azure Media Player Scripts*****-->
<!--Note: DO NOT USE the "latest" folder in production. Replace "latest" with a version number like "1.0.0"-->
<!--EX:<script src="//amp.azure.net/libs/amp/1.0.0/azuremediaplayer.min.js"></script>-->
<!--Azure Media Player versions can be queried from //aka.ms/ampchangelog-->
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<!--*****END OF Azure Media Player Scripts*****-->

</head>
<body>
<h1>Sample: DRM - PlayReady, Widevine, and FairPlay (no token)</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<div id="copyrightInfo" class="muted">
Sintel video - &copy; copyright 2008, Blender Foundation | <a href="https://durian.blender.org/" target="_blank">durian.blender.org</a>
</div>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
//note: we have not included an actual certificate URL to demo, but you will need to link your own hosted .der 
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "//ampvideos.streaming.mediaservices.windows.net/9b77ed82-94af-41bc-b08b-537e7a530eb6/sintel_trailer-1080p_fp.ism/manifest", type: "application/vnd.ms-sstr+xml", protectionInfo: [{ type: "PlayReady" }, { type: "Widevine" },{ type: "FairPlay", certificateUrl: "//yourdomain/fairplay.der" }] }, ]);
</script>
<p><b>Note:</b> to run this sample on Safari, developers need to replace the certificate referenced in the code with a proper certificate.</p>
<footer>
<br />
<p>© Microsoft Corporation...