JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.1.1/mediaelementplayer.min.css">
<script src="https://rawgit.com/mediaelement/mediaelement/master/build/mediaelement-and-player.js"></script>
<link rel="stylesheet" href="https://rawgit.com/mediaelement/mediaelement/master/build/mediaelementplayer.css">
<video id="vid" width="640" height="360"></video>
<div id="loading">Loading streaming...</div>

JavaScript

fetch('https://crossorigin.me/https://drm-quick-start.azurewebsites.net/api/authorization/Axinom%20demo%20video')
  .then(res => res.json())
  .then(licenseToken => {
  let player = new MediaElementPlayer('vid', {
      success: () => {
           document.getElementById('loading').remove()
      }
  })

  player.setSrc([{
    src: 'https://media.axprod.net/TestVectors/v6-MultiDRM/Manifest_1080p.mpd',
    drm: {
      "com.widevine.alpha": {
        "serverURL": "https://drm-widevine-licensing.axtest.net/AcquireLicense",
        "httpRequestHeaders": {
          "X-AxDRM-Message": licenseToken
        }
      },
      "com.microsoft.playready": {
        "serverURL": "https://drm-playready-licensing.axtest.net/AcquireLicense",
        "httpRequestHeaders": {
          "X-AxDRM-Message": licenseToken
        }
      }
    }
  }])

  window.player = player
})