网页滚动视频自动播放异常：多视频同时播放，如何实现单视频播放？

我们在网站上实现了视频滚动进入视口时带声音自动播放的功能，但存在问题：当多个视频同时处于视口内时，会同时播放，无法像Instagram或Facebook那样仅播放一个视频。需要调整逻辑，使新进入视口的视频播放时，其他视频暂停。

当前代码 #

HTML代码 #

<video 
id="video--<?php echo $wo['media']['storyId'];?>" 
class="plyrr-<?php echo $wo['media']['storyId'].$rand ; ?> <?php echo($wo['rvad_con']); ?> video-container" 
playsinline preload="metadata" 
poster="<?php  echo $wo['media']['video_thumb'];?>" 
data-setup="{}" data-post-video="<?php echo $wo['media']['storyId'];?>"
>

JavaScript代码 #

$(window).scroll(function(e)
{
    if (!document.pictureInPictureElement) 
    {
        $('.plyrr-<?php echo $wo['media']['storyId'].$rand ; ?>').each(function()
        {
            if ($(this).is(":in-viewport")) 
            { jQuery(this).get(0).play(); } 
            else 
            { $(this)[0].pause();  }
        });
    }
});

优化方案 #

1. 统一视频类名 #

给所有需要自动播放的视频添加通用类autoplay-video，方便批量处理：

<video 
id="video--<?php echo $wo['media']['storyId'];?>" 
class="plyrr-<?php echo $wo['media']['storyId'].$rand ; ?> <?php echo($wo['rvad_con']); ?> video-container autoplay-video" 
playsinline preload="metadata" 
poster="<?php  echo $wo['media']['video_thumb'];?>" 
data-setup="{}" data-post-video="<?php echo $wo['media']['storyId'];?>"
>

2. 重构JavaScript逻辑 #

替换原有JS代码，实现单视频互斥播放逻辑，同时优化滚动性能：

// 防抖函数：减少滚动事件触发频率，降低性能消耗
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 视频自动播放核心处理逻辑
function handleVideoAutoplay() {
  // 存在画中画视频时跳过处理
  if (document.pictureInPictureElement) return;

  const videos = $('.autoplay-video');
  let activeVideo = null;
  let maxVisibleArea = 0;

  // 遍历所有视频，找出视口内可见面积最大的视频
  videos.each(function() {
    const video = $(this)[0];
    const rect = video.getBoundingClientRect();
    
    // 计算视频在视口内的可见区域尺寸
    const visibleWidth = Math.max(0, Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0));
    const visibleHeight = Math.max(0, Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0));
    const visibleArea = visibleWidth * visibleHeight;

    // 更新优先级最高的视频
    if (visibleArea > maxVisibleArea && visibleArea > 0) {
      maxVisibleArea = visibleArea;
      activeVideo = video;
    }
  });

  // 播放选中视频，暂停其他所有视频
  videos.each(function() {
    const video = $(this)[0];
    if (video === activeVideo) {
      // 捕获浏览器自动播放限制导致的失败
      video.play().catch(err => console.log('视频播放失败:', err));
    } else {
      video.pause();
    }
  });
}

// 绑定防抖后的滚动事件
$(window).scroll(debounce(handleVideoAutoplay, 100));

// 页面加载完成后初始化一次，处理初始视口内的视频
$(document).ready(handleVideoAutoplay);

关键改动说明 #

• 防抖处理：避免滚动时频繁触发逻辑，优化页面性能
• 可见面积判断：选择视口内最显眼（可见面积最大）的视频播放，符合社交平台用户习惯
• 互斥播放：确保同一时间仅一个视频处于播放状态
• 错误捕获：兼容浏览器自动播放政策，处理播放失败场景

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