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:
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:
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
.
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"
/>