Media Player mute and volumne button issue for multiple videos on same page

Marcus 1 Reputation point
2022-12-12T19:30:02.39+00:00

Hi, when there is 1 video on a page, the mute and volume controls work fine. When there is more than 1 video, pressing mute or lowering the volume does not work. The next video on the page is instead controlled.

When I click the mute button or move the volume slider up and down on the current video, I can see the other media player's controls moving. In order to control this issue, I need to initialize only the current player that is in use. However, this does not seem like the right way, in that I have to initlize each player on demand, instead of having the media players ready to play. Is there a better way to have multiple media players be in ready mode and have individual control over mute and volume buttons?

To demonstrate this issue, I've created a codepen using the azure demo videos. Each video has it's own ID. To see the issue with the controls, play either one of the videos, then try clicking on the mute or volume button.

https://codepen.io/marcus3874/pen/dyKEgOP

Community Center | Not monitored
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. John Deutscher (MSFT) 2,126 Reputation points
    2022-12-12T21:29:42.487+00:00

    I've seen similar discussions on this topic on Stack Overflow here - https://stackoverflow.com/questions/53293230/multiple-instances-of-azure-media-player-render-volume-control-useless

    I have not tried that workaround myself, but I know that there are issues with the underlying video.js control for volume when instantiating the AMP player multiple times on a page. Others have also worked around this by using iFrames as well.

    1 person found this answer helpful.
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.