基于jQuery的视频悬停条件判断：扩展链接悬停加载至视频

Hey there! Great job adapting that image-focused hover code so far—especially as someone who cut their teeth on <table>-based sites back in the early 2000s. Let’s break down how to extend this to video, with validation checks and practical guidance tailored to your background.

Core Logic Alignment with Your Existing Image Setup #

First, let’s confirm the foundation: your current image hover feature likely follows this flow:

• Listens for mouseover on target links
• Dynamically creates an <img> element, sets its src to the image URL from the link
• Appends the image to the DOM near the link
• Listens for mouseout to remove/hide the image

For video, we’ll reuse this pattern but swap out the <img> for a <video> element—with critical browser-specific tweaks to avoid common pitfalls.

Step-by-Step Code Modifications & Validation #

Let’s walk through the key changes, with checks to ensure everything works as expected:

1. Update Dynamic Element Creation #

Replace your image creation code with video-specific logic. Browsers have strict autoplay rules, so we’ll add mandatory attributes here:

// Swap your <img> creation code with this
const videoEl = document.createElement('video');
videoEl.src = link.getAttribute('data-video-url'); // Match your data attribute name (e.g., data-img-url for images)
videoEl.width = 400; // Adjust to match your hover image dimensions
videoEl.height = 300;
videoEl.muted = true; // REQUIRED: Most browsers block unmuted autoplay
videoEl.autoplay = true;
videoEl.playsInline = true; // Fixes iOS autoplay issues (prevents fullscreen forced play)
videoEl.controls = false; // Optional: Hide controls for hover-only playback

Validation Check:

• Use a semantic data-* attribute (like data-video-url) to store video URLs, just like you did for images—this keeps your HTML clean and avoids mixing content with behavior.
• Test on iOS: The playsInline attribute is non-negotiable here; without it, iOS will force the video to open in fullscreen instead of playing inline.

2. Adjust Hover Event Handling #

Your existing mouseover/mouseout listeners will mostly work, but add video-specific cleanup:

// On mouseover: Add video to DOM
link.addEventListener('mouseover', () => {
  // Clean up any existing video first to avoid duplicates
  const existingVideo = document.querySelector('.hover-video');
  if (existingVideo) existingVideo.remove();
  
  videoEl.classList.add('hover-video');
  link.parentNode.appendChild(videoEl); // Append to the same parent as your hover images
});

// On mouseout: Pause and remove video
link.addEventListener('mouseout', () => {
  videoEl.pause(); // Critical: Stops audio from playing in the background
  videoEl.remove();
});

Validation Check:

• Always pause the video before removing it—this prevents stray audio from playing if the user hovers away quickly.
• Adding a unique class like .hover-video makes it easy to target and clean up existing elements, so you don’t end up with 10 videos stacked on top of each other.

3. CSS Styling for Consistent Behavior #

Copy your hover image CSS and adjust it for video, plus add a loading state:

.hover-video {
  position: absolute;
  z-index: 1000;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* Match your hover image positioning (e.g., top: 20px; left: 0;) */
}

/* Optional: Add a loading spinner for video (since videos load slower than images) */
.hover-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Validation Check:

• Add position: relative to the link’s parent element if you haven’t already—this ensures the absolute-positioned video stays anchored to the link, not the entire page.
• Hide the spinner once the video loads by adding this listener:

  videoEl.addEventListener('loadeddata', () => {
    videoEl.style.setProperty('--spinner-display', 'none');
    // Or adjust the pseudo-element visibility via class
  });
  

Critical Edge Cases & Compatibility Tests #

Since you’re working with an older <table> layout and not a full-time developer, these are the must-check items:

• Autoplay Rules: Never skip muted = true—all modern browsers block unmuted autoplay by default, even on hover.
• Video Formats: Stick to MP4 (H.264 codec) for broadest compatibility. Avoid WebM if you need to support older Safari versions.
• Mobile Behavior: On touch devices, "hover" translates to a tap. Add touchstart/touchend listeners to toggle the video, otherwise mobile users might get stuck with a playing video.
• Table Layout Safety: Absolute positioning should keep the video from breaking your <table> structure, but test on your actual page to make sure it doesn’t push table cells out of place.

Final Validation Tip #

Before deploying, test your code in:

• Chrome/Firefox (desktop)
• Safari (desktop and iOS)
• Android Chrome
• Your actual <table> site—double-check that the video doesn’t disrupt the old-school layout you built!

内容的提问来源于stack exchange，提问作者Wristy Manchego