Azure Media Player鼠标悬停显示控件：jQuery方案及文档缺失问题

Nice catch—your current jQuery solution gets the job done, but it can definitely be polished to be more robust and play nicer with Azure Media Player's (AMP) native behavior instead of hacking raw DOM elements directly. Let's break down some better approaches:

Use AMP's Native Control Methods #

Instead of targeting the .vjs-control-bar element directly, leverage AMP's built-in showControls() and hideControls() methods. This avoids conflicts with AMP's internal state management and works reliably even if the player's DOM structure updates.

Single Player Implementation #

First, make sure you're grabbing the AMP player instance when initializing:

// Initialize your player (adjust the ID and config to match your setup)
const myPlayer = amp('myPlayer', {
  controls: true,
  autoplay: false,
  // Optional: Set auto-hide delay for controls during playback
  controlBarAutoHideTimeout: 3000
}, () => {
  console.log('Player initialized successfully');
});

// Get the player container
const playerContainer = document.querySelector('.azuremediaplayer');

// Bind hover events to control visibility via AMP API
playerContainer.addEventListener('mouseenter', () => {
  myPlayer.showControls();
});

playerContainer.addEventListener('mouseleave', () => {
  myPlayer.hideControls();
});

Multiple Players on One Page #

If you have multiple AMP instances, loop through each container and pair it with its corresponding player instance:

// Get all player containers
const playerContainers = document.querySelectorAll('.azuremediaplayer');

playerContainers.forEach(container => {
  // Grab the player instance from the container's video element
  const player = amp(container.querySelector('video'));
  
  // Bind hover events
  container.addEventListener('mouseenter', () => player.showControls());
  container.addEventListener('mouseleave', () => player.hideControls());
});

Enhance with Playback State Awareness #

For a smoother user experience, adjust the hide logic based on whether the video is playing or paused. This keeps controls visible when the video is paused, even if the user moves their mouse away:

const myPlayer = amp('myPlayer', {
  controls: true,
  autoplay: false
}, () => {
  // Optional: Hide controls automatically when playing
  myPlayer.addEventListener('play', () => {
    setTimeout(() => myPlayer.hideControls(), 3000);
  });
});

const playerContainer = document.querySelector('.azuremediaplayer');

playerContainer.addEventListener('mouseenter', () => myPlayer.showControls());

playerContainer.addEventListener('mouseleave', () => {
  // Only hide controls if the video is actively playing
  if (!myPlayer.paused()) {
    myPlayer.hideControls();
  }
});

Optimized jQuery Version (If You Prefer) #

If you want to stick with jQuery, fix the global selector issue to target only the current player's controls, and add CSS transitions for smoother visibility changes:

First, add a CSS transition to make the fade in/out smoother:

.vjs-control-bar {
  transition: visibility 0.3s, opacity 0.3s;
}

Then update your jQuery code:

$(".azuremediaplayer").hover(
  function () {
    // Target only the control bar inside the hovered player
    $(this).find(".vjs-control-bar").css({ 
      "visibility": "visible", 
      "opacity": "1" 
    });
  }, 
  function () {
    $(this).find(".vjs-control-bar").css({ 
      "visibility": "hidden", 
      "opacity": "0" 
    });
  }
);

The key improvement here is using $(this).find() instead of a global selector, so you don't accidentally affect all players on the page when hovering over one. Adding the CSS transition also makes the visibility change feel less jarring.

内容的提问来源于stack exchange，提问作者Mike in Coloma