Search code examples
cssazureazure-media-services

Azure Media Player: make it fix the width and hide the play overlay?


Not sure how many people use it, but I noticed the only (free) choice for me to use videos from Azure Media Service is to use their own player. (and welcome suggestions for other players that works in variety of browsers)

However, I noticed some issues:

Following their examples (https://amp.azure.net/libs/amp/latest/docs/Samples.html, tried both JS and HTML5 versions), I noticed the page always show the ugly play button overlay -- Any way we can hide this play button or make it look better?

Also, looks like the video always default to 300x150px, even if I set the size for the Video tag. Any way I can make the video fit the width of its parent and resize when its parent resizes? (assuming we only have 16:9 videos, hopefully without using JS)

Thanks!


Solution

  • You can use just about any video player to play video from Azure Media Services. For example, I use VideoJS for my projects.

    You simply change the src on the video player that you are using and have it point towards your videos stored in Azure. I wrote an in-depth series about the video player and how AMS works.

    In terms of overriding their code, sure, you can apply different styles to the media player. In the debugger, check out which styles are currently applied to that class / ID, and make changes with your own CSS.

    The JS will be obfuscated, however. Hopefully this helps!