JavaScript实现视频切换播放 播完切回循环预告片失效问题

代码存在两个核心bug，导致预期逻辑失效：

• 初始给<video>标签配置了全局loop属性，切换到正课视频时没有关闭该属性，正课视频播放至结尾会直接触发循环重播，不会抛出ended事件，后续切回预告片的逻辑完全没有触发机会。
• 绑定ended事件时使用了匿名回调函数，后续调用removeEventListener时传入的handler未定义，既无法正常移除监听，多次点击按钮还会堆积重复监听，造成逻辑混乱。

修复逻辑只需要补三处处理：

• 切换正课视频前关闭loop属性，保证正课单次播放结束后能正常触发ended事件
• 把ended事件的回调改为具名函数，确保监听可以正常绑定、正常移除
• 切回预告片时重新开启loop属性，保证预告片恢复默认循环播放逻辑

修复后的完整可运行代码如下：

<video id="mp4Source" autoplay loop controls width="100%" src="/assets/trailer.mp4"></video>

<button type="button" name="button" onclick="playLectureVid()"> Play Lecture Vid</button>

<script>
function playLectureVid(){
    const video = document.getElementById("mp4Source");
    // 正课播放模式关闭循环
    video.loop = false;
    video.src = '/assets/lecture.mp4';
    video.load();
    video.play();

    // 正课播放结束的回调
    function onLectureEnd() {
        // 移除本次绑定的事件监听，避免后续播放预告片时误触发
        video.removeEventListener("ended", onLectureEnd);
        // 切回预告片，恢复循环配置
        video.src = '/assets/trailer.mp4';
        video.loop = true;
        video.load();
        video.play();
    }

    video.addEventListener("ended", onLectureEnd);
}
</script>

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