在一页上自动播放多个视频元素

Question

我正在尝试将特色视频添加到 woocommerce 中的存档产品页面。

我遇到的唯一问题是只有一个视频自动播放，其他视频只是暂停。 当我页面上有一个视频时，它会完美播放，一旦我添加第二个视频，它就会暂停。

我不确定这是否与浏览器自动播放策略有关，或者只是我的代码/视频参数中的错误。

控制台抛出错误： 未捕获（承诺中）DOMException：play() 请求被暂停() 调用中断。

有解决方法吗？

我见过很多这样的例子，例如： https://marcopanconesi.com/collections/all

 <?php

                        // Display either the featured video or the post thumbnail
                        if ($featured_video_mp4) {
                            // If featured video exists, display the video using video shortcode
                            $attr = array(
                                'src'      => $featured_video_mp4,
                                'preload'  => true,
                                'loop'     => true,
                                'controls' => '',
                                'muted'    => true,
                                'autoplay' => true,
                            );

                            echo '<div class="relative w-full h-full bg-black">';

                            // Display the featured video shortcode
                            echo wp_video_shortcode($attr);
                            echo '</div>';
                        } else {
                            // Otherwise, display the post thumbnail
                            the_post_thumbnail('medium', ['class' => 'w-full']);
                        }
                        ?>

我尝试用jQuery强制播放视频，没有任何结果，视频仍然在页面上保持暂停状态。

    jQuery(document).ready(function() {
      // Select all video elements
      jQuery('.wp-video-shortcode').each(function(index, video) {
        var videoElement = jQuery(video)[0]; 
        
        jQuery(videoElement).on('canplaythrough', function() {
          jQuery(this).get(0).play();
        });
    
        videoElement.load();
        
      });
    });

Answer 1

我找到了我自己问题的答案。 对于遇到同样问题的任何人，最好放弃内置的 WordPress oembed 短代码并直接使用视频标签，如本示例所示：

echo '<video class="autoplay-loop-video" muted loop autoplay>';
echo '<source src="' . esc_url($featured_video_mp4) . '" type="video/mp4">';
echo 'Your browser does not support the video tag.';
echo '</video>';