如何修改代码实现多视频全部加载完成后同步播放？

原HTML结构 #

页面会动态生成多个如下结构的视频模块，数量不固定：

<div class="video">
  <video control="controls" src="some_video.mp4"></video>
  <p>Play:
    <span class="state"> Paused</span>
    <input class="together" type="button" value="All">
  </p>
</div>

原JavaScript代码 #

当前实现了点击按钮控制所有视频同步播放/暂停，但存在加载不同步的问题：

$(document).ready(function(){

var running = false
$("div.video input.together").each(function() {
        $(this).on("click", function() {
            running = !running
            $("video").each(function() {
                if(running)  {
                    $(this).get(0).play();
                }
                else{
                    $(this).get(0).pause();
                }
            })
            $("div.video span.state").each(function() {
                if(running){
                    $(this).text("Running");
                }
                else{
                    $(this).text("Paused");
                }
            })
        })
    })


}

问题描述 #

部署到NAS后，部分视频加载耗时较长，点击按钮后已加载的视频直接播放，未加载的视频后续才开始，无法实现真正同步。需要修改代码，确保所有视频加载完成后再统一开始播放，同时适配动态生成的任意数量视频。

修改后的解决方案 #

$(document).ready(function(){
    let running = false;
    const videos = $("video").toArray();
    let loadedVideoCount = 0;
    const totalVideos = videos.length;

    // 初始化统计已加载完成的视频
    videos.forEach(video => {
        // readyState >=4 表示视频已加载到可流畅播放的状态
        if (video.readyState >= 4) {
            loadedVideoCount++;
        } else {
            // 监听视频加载完成事件，确保只触发一次
            video.addEventListener('canplaythrough', () => {
                loadedVideoCount++;
            }, { once: true });
        }
    });

    // 统一处理播放/暂停的逻辑函数
    function togglePlayback(start) {
        if (start) {
            // 轮询检查所有视频是否加载完成
            const loadChecker = setInterval(() => {
                if (loadedVideoCount === totalVideos) {
                    clearInterval(loadChecker);
                    // 所有视频加载完成，统一播放
                    videos.forEach(video => video.play());
                    $("div.video span.state").text("Running");
                }
            }, 100);
        } else {
            // 暂停无需等待，直接执行
            videos.forEach(video => video.pause());
            $("div.video span.state").text("Paused");
        }
    }

    // 绑定按钮点击事件（优化原重复绑定逻辑）
    $("div.video input.together").on("click", function() {
        running = !running;
        togglePlayback(running);
    });
});

关键修改说明 #

• 跟踪加载状态：通过loadedVideoCount和totalVideos统计已加载和总视频数，利用canplaythrough事件监听未加载视频的完成状态，同时兼容页面加载时已完成加载的视频。
• 等待全部加载后播放：点击播放时通过定时器轮询检查，直到所有视频都加载完成，再统一调用play()方法，确保同步开始。
• 暂停逻辑简化：暂停操作不需要等待加载，直接触发所有视频的pause()即可。
• 动态数量适配：通过$("video").toArray()自动获取所有视频元素，无需关心动态生成的数量。

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