如何实现视频非自动播放，仅在所在区块进入视口时启动播放？

Got it, let's tackle this issue—your horizontal scroll layout with video blocks is autoplaying all videos on page load, making users miss the opening content. The ideal solution here is the Intersection Observer API, which efficiently detects when elements enter the viewport (way better than clunky scroll event listeners). Here's a step-by-step fix:

Step 1: Update Your Video HTML #

First, make sure your video tags are set up correctly to play nicely with browser autoplay rules and our script:

<div class="video-block">
  <video class="block-video" muted playsinline preload="metadata">
    <source src="your-video-source.mp4" type="video/mp4">
  </video>
  <!-- Your block content here -->
</div>

• muted: Most browsers require videos to be muted for automatic playback (critical for this to work)
• playsinline: Ensures videos play inline on mobile instead of fullscreen
• preload="metadata": Only loads video metadata (not the full file) initially to save bandwidth
• Remove any autoplay attribute—we'll handle playback via script instead

Step 2: Add the Intersection Observer Script #

Add this JavaScript to your page (either in a <script> tag at the end of <body> or your external JS file):

// Select all video elements in your blocks
const videos = document.querySelectorAll('.block-video');

// Configure the observer options
const observerOptions = {
  root: null, // Use the viewport as the root
  rootMargin: '0px', // No margin around the root
  threshold: 0.5 // Trigger when 50% of the video is visible
};

// Define the observer callback function
const handleIntersection = (entries, observer) => {
  entries.forEach(entry => {
    const video = entry.target;
    if (entry.isIntersecting) {
      // Play the video when it enters the viewport
      video.play().catch(err => {
        console.error('Error playing video:', err);
      });
    } else {
      // Optional: Pause the video when it exits the viewport to save resources
      video.pause();
    }
  });
};

// Initialize the observer
const observer = new IntersectionObserver(handleIntersection, observerOptions);

// Observe each video
videos.forEach(video => {
  observer.observe(video);
});

Key Customizations for Your Layout #

• Adjust the trigger threshold: If you want the video to start playing as soon as it peeks into the viewport, change threshold to 0.1 (10% visibility). If you want it to play only when fully visible, use 1.0.
• Target the right elements: If your video class isn't .block-video, update the querySelectorAll selector to match your HTML.
• Skip pause on exit: If you don't want videos to pause when leaving the viewport, just remove the else block.

Compatibility Note #

The Intersection Observer API is supported in all modern browsers. If you need to support older browsers (like IE11), you can add a polyfill (but this is rarely necessary for most projects today).

Test this out, and your videos should now only start playing when their respective blocks scroll into the viewport—no more missed opening content!

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