WooCommerce产品归档页多视频自动播放异常问题排查

问题根源 #

你遇到的Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()错误，核心原因是浏览器自动播放策略限制：多数现代浏览器不允许页面加载时同时自动播放多个视频（即便设置了静音，部分浏览器仍会限制批量自动播放），再加上WordPress的wp_video_shortcode内部可能存在自动播放的冲突逻辑，你的jQuery代码重复触发play()操作，反而被浏览器拦截机制打断。

解决方案 #

1. 优化视频参数与WordPress短代码 #

修改PHP中的视频属性，确保参数符合浏览器自动播放要求，同时规避短代码内部的冗余逻辑：

<?php
// 显示特色视频或产品缩略图
if ($featured_video_mp4) {
    $attr = array(
        'src'      => $featured_video_mp4,
        'preload'  => 'metadata', // 仅预加载元数据，降低资源占用
        'loop'     => true,
        'controls' => false, // 明确关闭控件，避免干扰自动播放逻辑
        'muted'    => true,
        'autoplay' => false, // 先关闭短代码自带的autoplay，交由JS控制
        'class'    => 'product-featured-video' // 添加自定义类，方便精准选择元素
    );

    echo '<div class="relative w-full h-full bg-black">';
    echo wp_video_shortcode($attr);
    echo '</div>';
} else {
    the_post_thumbnail('medium', ['class' => 'w-full']);
}
?>

2. 改进JS逻辑：按需触发播放（可见时播放） #

浏览器允许视频进入视口时自动播放（静音状态下），因此改为监听视频的可见性，仅当视频出现在用户视野中时才触发播放，避免批量触发被拦截：

jQuery(document).ready(function() {
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1 // 当视频10%进入视口时触发播放
    };

    const videoObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            const video = entry.target;
            if (entry.isIntersecting) {
                // 确认视频已静音后尝试播放
                if (video.muted) {
                    video.play().catch(err => {
                        console.log('视频播放失败:', err);
                    });
                }
            } else {
                // 视频离开视口时暂停，节省资源
                video.pause();
            }
        });
    }, observerOptions);

    // 监听所有自定义类的视频元素
    jQuery('.product-featured-video').each(function() {
        videoObserver.observe(this);
        this.load();
    });
});

3. 额外优化建议 #

• 确保视频采用H.264编码格式，兼容性最优；
• 给视频添加poster属性设置封面图，加载时显示封面提升体验；
• 若部分浏览器仍需用户交互才能播放，可添加页面点击事件解锁播放权限：

// 页面首次点击后，解锁所有视频播放权限
jQuery(document).one('click', function() {
    jQuery('.product-featured-video').each(function() {
        if (this.muted && !this.playing) {
            this.play().catch(err => {});
        }
    });
});

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