视频pause()函数失效求助：点击链接无法停止并切换视频

Hey there, let's figure out why that pause() call is throwing an error and breaking your JS! The "pause() is not a function" message tells us the element you're targeting isn't actually a video/audio element (or it doesn't exist at all). Let's break this down step by step.

First, Diagnose the Root Issue #

Before fixing, let's confirm what you're actually selecting. Add these console logs right before your pause() call to see what's going on:

console.log("Value of $old_media:", $old_media);
console.log("DOM element being targeted:", $($old_media)[0]);

• If the second log shows null or an element that's not <video>/<audio> (like a <div>), that's your core problem—you're not selecting the right media element.
• If the first log shows $old_media is already a jQuery object (e.g., jQuery.fn.init [video]), wrapping it in another $() is redundant and can cause unexpected behavior.

Fixes Based on Your Scenario #

Scenario 1: $old_media is a selector string (e.g., ".my-video" or "#main-video")

You don't need double $() calls. Grab the DOM element directly from the selector:

// Correct way to get the media element from a selector string
const mediaElement = $(old_media)[0];
// Or use .get(0) for slightly better readability (same result)
const mediaElement = $(old_media).get(0);

Scenario 2: $old_media is already a jQuery object

Skip the extra $() wrapper entirely—you can access the DOM element directly from the existing jQuery object:

const mediaElement = $old_media[0];
// Or $old_media.get(0)

Add a Safety Guard to Prevent Script Crashes

To stop your entire JS file from breaking if the element doesn't exist or isn't a media element, add a check before calling pause():

const mediaElement = $old_media[0]; // Adjust based on your scenario
if (mediaElement && typeof mediaElement.pause === 'function') {
  mediaElement.pause();
} else {
  console.warn("Could not pause media—target is not a valid video/audio element");
}

This way, even if something goes wrong, your script will keep running.

Example Working Implementation #

Here's a complete, safe example for switching videos when a link is clicked:

$(".video-switch-link").on("click", function(e) {
  e.preventDefault(); // Stop the link from navigating away
  const $oldVideo = $(".current-video"); // Your existing media element jQuery object
  const oldVideoElement = $oldVideo[0];

  // Pause the old video safely
  if (oldVideoElement && typeof oldVideoElement.pause === 'function') {
    oldVideoElement.pause();
  }

  // Switch to the new video (example logic)
  const newVideoSrc = $(this).data("video-src"); // Get new source from link's data attribute
  $oldVideo.attr("src", newVideoSrc);
  $oldVideo[0].load();
  $oldVideo[0].play();
});

Quick Recap #

• Double-check your selector is targeting an actual <video> or <audio> tag.
• Don't wrap a jQuery object in another $() call—it's unnecessary and confusing.
• Use guard clauses to handle edge cases, so your script doesn't crash unexpectedly.

内容的提问来源于stack exchange，提问作者Damien Joubert