如何在YouTube网页（非API）实现播放/暂停控制？代码查找未果

Hey there! I’ve tackled this exact issue with YouTube’s mobile web interface before, so let me break down how to get play/pause controls working without relying on the official API.

Step 1: Locate the Video Element #

YouTube’s mobile web page nests the video inside a <video> tag, often with specific classes to target. You can confirm this using your browser’s dev tools (F12), but here’s a reliable selector to grab it quickly:

document.querySelector('video.html5-main-video')

If that doesn’t work, right-click the video in dev tools, select "Copy > Copy selector" to get the exact current selector for the video element.

Step 2: Build Play/Pause Functions #

Once you’ve got the video element reference, you can use the native HTML5 video methods play() and pause() to control it. Here’s simple code for both actions:

// Trigger video playback
function startVideo() {
  const video = document.querySelector('video.html5-main-video');
  if (video) {
    video.play().catch(err => {
      console.log("Play failed - likely due to browser autoplay restrictions:", err);
    });
  }
}

// Pause the video
function stopVideo() {
  const video = document.querySelector('video.html5-main-video');
  if (video) video.pause();
}

Step 3: Handle Dynamic Loading #

YouTube loads elements dynamically, so if you run your code too early (before the video renders), you’ll get a null reference. To fix this, you can wait for the element to exist before executing your code:

// Wait for the video element to load
const videoObserver = setInterval(() => {
  const video = document.querySelector('video.html5-main-video');
  if (video) {
    clearInterval(videoObserver);
    // Now you can interact with the video, e.g.:
    // video.pause();
  }
}, 300); // Check every 300ms

Important Notes #

• Autoplay Restrictions: Most modern browsers block autoplay unless the user has interacted with the page (like clicking anywhere). So play() will only work reliably if it’s triggered by a user-initiated event (e.g., a custom button click).
• Page Structure Changes: YouTube occasionally updates its UI, so if your selector stops working, recheck the video element’s class/ID using dev tools to get the latest selector.

内容的提问来源于stack exchange，提问作者Ionuț Popescu