video包裹于a标签中无法在新标签页打开链接的解决求助

The issue here is that Video.js intercepts click events on the video element to handle play/pause functionality, which prevents the parent <a> tag's default link behavior from triggering when you click the video. Here are two reliable solutions to fix this:

Solution 1: Add a Custom Click Handler to the Video Player #

This approach uses Video.js's API to listen for clicks on the video (excluding the control bar) and manually open the link in a new tab. It keeps your existing HTML structure intact while adding the desired behavior.

Step-by-Step Implementation: #

1. Keep your original HTML (including the <a> tag, though we'll be handling the link via JavaScript for reliability).
2. Add this script after your existing Video.js initialization code:

// Wait for the Video.js player to fully load
videojs('videojs-w0').ready(function() {
  const player = this;
  const targetUrl = 'http://inmedia.co.in'; // Use full URL with protocol

  player.on('click', function(e) {
    // Skip if the click was on the control bar (so controls still work)
    if (!e.target.closest('.vjs-control-bar')) {
      // Open the URL in a new tab
      window.open(targetUrl, '_blank');
    }
  });
});

Key Notes: #

• Always use the full URL (with http:// or https://) in window.open() to avoid opening it as a relative path.
• The check for .vjs-control-bar ensures users can still interact with playback controls (volume, play/pause, etc.) without triggering the link.

Solution 2: Replace the Tag with an Overlay Div (Alternative) #

If you prefer a CSS-based approach, you can add a transparent overlay div on top of the video (excluding the control bar) that acts as the clickable link. This avoids relying on JavaScript event listeners:

Modified HTML: #

<div class="video-container">
  <a href="http://inmedia.co.in" target="_blank" class="video-overlay"></a>
  <video id='videojs-w0' class='video-js vjs-default-skin vjs-big-play-centered' width='640' height='264' poster='http://www.inmedia.co.in/platform/inmedia/frontend/web/screenimages/advertiser1 1.png' data-setup='{ "controls": true, "autoplay": true, "preload": "auto", "inactivityTimeout": 0, "controlBar": { "volumeMenuButton": true, "playToggle": false, "progressControl":false,"BigPlayButton": true } }'>
    <source type='video/mp4' src='http://www.inmedia.co.in/platform/inmedia/frontend/web/uploadvideos/advertiser1 1.webm'>
    <track src="http://vjs.zencdn.net/vtt/captions.vtt" kind="captions" srclang="en" label="English">
  </video>
</div>

CSS: #

.video-container {
  position: relative;
  display: inline-block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 50px); /* Leave space for the control bar (adjust height as needed) */
  z-index: 1;
}

/* Ensure Video.js controls stay above the overlay */
.video-js .vjs-control-bar {
  z-index: 2;
}

Key Notes: #

• Adjust the height value in .video-overlay to match the height of your control bar (default is ~50px).
• This approach keeps the link behavior purely in HTML/CSS, but requires careful positioning to avoid blocking controls.

内容的提问来源于stack exchange，提问作者arun webber