视口视频自动播放/暂停异常：手动暂停后自动恢复播放

你的核心问题在于：定时器每隔1秒就会强制根据视口状态控制视频播放/暂停，完全忽略了用户的手动操作。要解决这个问题，我们需要区分用户手动操作和自动逻辑的控制，让自动逻辑只在用户没有主动干预的时候生效。

下面是具体的修改方案：

1. 给视频添加用户操作标记 #

我们可以通过监听视频的play和pause事件，记录用户是否手动操作过视频。利用事件的isTrusted属性可以准确判断事件是否由用户交互触发（而非代码调用）。

2. 修改自动控制逻辑 #

在定时器的检测逻辑中，先检查用户是否手动操作过视频。如果用户已经手动控制过，就跳过自动逻辑；如果没有，再根据视口状态控制播放/暂停。

完整修改后的代码 #

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
};

// 给每个视频初始化用户控制标记，并监听手动操作事件
$('video').each(function() {
    $(this).data('userControlled', false);
    
    // 监听播放事件
    this.addEventListener('play', function(e) {
        if (e.isTrusted) {
            // 是用户手动触发的播放，标记为已控制
            $(this).data('userControlled', true);
        }
    });
    
    // 监听暂停事件
    this.addEventListener('pause', function(e) {
        if (e.isTrusted) {
            // 是用户手动触发的暂停，标记为已控制
            $(this).data('userControlled', true);
        }
    });
});

setInterval(function() {
    $('video').each(function(){
        // 只有当用户没有手动控制过，才执行自动逻辑
        if (!$(this).data('userControlled')) {
            if ($(this).isInViewport()) {
                $(this)[0].play();
            } else {
                $(this)[0].pause();
                // 视频离开视口后，重置控制标记，下次进入视口时恢复自动播放
                $(this).data('userControlled', false);
            }
        }
    });
}, 1000);

#right { position: absolute; top: 2000px; }
#video1 { position: absolute; left: 0px; top: 1000px; }
#video2 { position: absolute; left: 0px; top: 2000px; }
body { width: 500px; height: 3000px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="info"></div>
<div id="down"> scroll down please... </div>
<video id="video1" controls muted>
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
<video id="video2" controls muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>
    Your browser does not support the video tag.
</video>

额外优化建议 #

• 你提到的isInViewport函数有左右方向的检测缺陷，可以修改函数来包含水平方向的检测：

$.fn.isInViewport = function() {
    var rect = this[0].getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

这个版本使用getBoundingClientRect()，可以更准确地检测元素是否完全在视口内（如果需要部分可见，调整判断条件即可）。

• 定时器的1秒间隔可以调整，或者改用Intersection Observer API来替代定时器，性能更好，更精准：

// 使用Intersection Observer替代定时器
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        const video = entry.target;
        if (!$(video).data('userControlled')) {
            if (entry.isIntersecting) {
                video.play();
            } else {
                video.pause();
                $(video).data('userControlled', false);
            }
        }
    });
}, { threshold: 0.5 }); // 当视频50%可见时触发

$('video').each(function() {
    $(this).data('userControlled', false);
    observer.observe(this);
    
    // 监听用户手动操作事件
    this.addEventListener('play', function(e) {
        if (e.isTrusted) $(this).data('userControlled', true);
    });
    this.addEventListener('pause', function(e) {
        if (e.isTrusted) $(this).data('userControlled', true);
    });
});

Intersection Observer是浏览器原生API，不需要定时轮询，性能更优，推荐使用。

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