如何实现HTML5视频进入视口仅触发播放一次？

需求：当视频容器进入视口时播放视频，播放一次后保持暂停，避免滚动页面时重复触发播放。现有脚本如下：

jQuery.fn.isInViewport = function() {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight();

    var viewportTop = jQuery(window).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

jQuery(window).on('resize scroll', function() {
    if (jQuery('.videoblock').isInViewport()) {
        jQuery('video.full_screen_sections_video').trigger('play');
    } 
});

我尝试在触发播放后添加jQuery(this).removeClass('videoblock');解决了问题，但不确定这是不是最优方案。

几种更稳妥的实现方案 #

方案1：用数据属性标记播放状态

这种方式不会影响元素的样式类，仅用数据属性记录是否已播放，逻辑更清晰：

jQuery.fn.isInViewport = function() {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight();

    var viewportTop = jQuery(window).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

jQuery(window).on('resize scroll', function() {
    var $videoBlock = jQuery('.videoblock');
    // 仅当未播放且进入视口时触发
    if ($videoBlock.isInViewport() && !$videoBlock.data('has-played')) {
        jQuery('video.full_screen_sections_video').trigger('play');
        // 标记为已播放
        $videoBlock.data('has-played', true);
    } 
});

方案2：播放完成后解绑监听事件

如果视频只需要播放一次，播放结束后直接移除滚动/resize监听，彻底避免后续无效判断，性能更优：

jQuery.fn.isInViewport = function() {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight();

    var viewportTop = jQuery(window).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

// 单独提取监听逻辑函数
function checkVideoPlayCondition() {
    if (jQuery('.videoblock').isInViewport()) {
        var $video = jQuery('video.full_screen_sections_video');
        $video.trigger('play');
        // 视频播放结束后，解绑所有相关监听
        $video.one('ended', function() {
            jQuery(window).off('resize scroll', checkVideoPlayCondition);
        });
    }
}

// 绑定初始监听
jQuery(window).on('resize scroll', checkVideoPlayCondition);

关于你现有解法的说明 #

你通过移除videoblock类的方式是可行的，但如果这个类同时承担了样式控制的作用，移除后可能会破坏页面布局。如果videoblock仅作为触发播放的标识类，这种方法没问题；但如果涉及样式，更推荐上面两种方案。

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