Laravel中用Video.js处理视频数组，实现多视频进度获取与互斥播放

现有代码的核心问题 #

1. 重复ID冲突：所有视频使用相同的id="my-video"，导致仅能获取第一个视频的实例，无法操作其他视频。
2. 实例绑定错误：仅初始化了第一个视频的Player实例，其他视频的播放进度无法正确获取。
3. 缺失进度管理逻辑：未监听暂停事件保存进度，也没有在页面加载时读取历史进度恢复播放。

解决方案步骤 #

1. 修改Blade模板，给每个视频分配唯一标识

将视频的id改为动态值，绑定对应课程ID，同时添加data-lesson-id属性方便脚本关联：

@foreach($lessons as $lesson)
<div class="d-flex justify-content-between align-items-center">
    <div class="d-flex align-items-center">
        <!-- Video button -->
        <video
            id="my-video-{{ $lesson->id }}"
            class="video-js"
            controls
            preload="auto"
            width="640"
            height="264"
            poster="{{ asset('assets/images/courses/4by3/01.jpg') }}"
            data-lesson-id="{{ $lesson->id }}"
            data-setup="{}"
        >
            <source src="{{ asset('storage/video/'.$lesson->link) }}" type="video/mp4" />
        </video>
        <hr> <!-- Divider -->

        <!-- Content -->
        <div class="ms-3">
            <a href="#" class="d-inline-block text-truncate mb-0 h6 fw-normal w-100px w-sm-200px w-md-400px"> {{ $lesson->title }}</a>
            <ul class="nav nav-divider small mb-0">
                <li class="nav-item">Dire: {{ $lesson->playing_time }}</li>
            </ul>
        </div>
    </div>
</div>
<hr> <!-- Divider -->
@endforeach

2. 重写JavaScript逻辑，实现多视频控制与进度管理

初始化每个视频的Video.js实例，处理播放互斥、暂停保存进度、加载恢复进度：

<script>
// 存储所有视频Player实例
const videoPlayers = {};

window.addEventListener('load', function() {
    // 初始化所有Video.js播放器
    document.querySelectorAll('.video-js').forEach(videoElement => {
        const lessonId = videoElement.dataset.lessonId;
        const player = videojs(videoElement.id);
        videoPlayers[lessonId] = player;

        // 页面加载时恢复历史进度
        const savedTime = localStorage.getItem(`video-progress-${lessonId}`);
        if (savedTime) {
            player.currentTime(parseFloat(savedTime));
        }

        // 播放时暂停其他视频
        player.on('play', function() {
            Object.values(videoPlayers).forEach(otherPlayer => {
                if (otherPlayer !== player && !otherPlayer.paused()) {
                    otherPlayer.pause();
                }
            });
        });

        // 暂停时保存当前进度到localStorage
        player.on('pause', function() {
            const currentTime = player.currentTime();
            localStorage.setItem(`video-progress-${lessonId}`, currentTime.toString());
        });

        // 视频结束时清除进度记录（可选）
        player.on('ended', function() {
            localStorage.removeItem(`video-progress-${lessonId}`);
        });
    });
});
</script>

关键说明 #

• 唯一ID与实例映射：通过课程ID绑定每个视频的Player实例，确保能精准操作对应视频。
• 进度存储：使用localStorage实现前端本地进度保存；若需同步到后端，可在暂停事件中添加AJAX请求，将进度提交到Laravel接口存储到数据库。
• 播放互斥优化：直接通过Video.js实例方法判断播放状态，逻辑更简洁可靠。

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