azure-media-servicesazure-media-player

Azure Media Player controls missing css classes


I have a component using Azure Media Player (my videos have AES encryption) and when I set the controls property to true all I have is a lot of giant letter through the screen:

Controls with missing css classes

If I inspect these giant letters, I can see css classes (like vjs-remaining-time-display) that don't exist in the amp css file:

vjs-remaining-time-display class doesnt exist

How could it be possible for the player to create elements with classes that don't exist? How can I fix this?

Thanks.

For those who want to reproduce, problem can be seen here: https://codepen.io/ricardogaefke/pen/eYxaGgO or you can clone https://github.com/RicardoGaefke/azuremediaplayer.git.

All you need after cloning is running npm install and npm run dev.


Solution

  • It worked when I just replaced:

          <video
            id="videoAMP"
            ref={videoAMPRef}
          />
    

    with:

          <video
            id="videoAMP"
            ref={videoAMPRef}
            className="azuremediaplayer amp-big-play-centered amp-default-skin"
          />