核心需求分析
在网页开发中，我们常会遇到这样的场景：需要一个视频（如预告片或背景视频）持续循环播放，直到用户进行特定操作（例如点击按钮）后，切换到另一个视频（如正片或教程），该视频播放完毕后，系统应自动返回并继续播放最初的循环视频。直接通过修改单个
解决方案概述
为了优雅地解决上述问题，最佳实践是使用两个独立的
HTML 结构
首先，我们需要在HTML中定义两个
代码说明：
- id="trailer"：用于标识主视频（预告片）。
- id="lecture"：用于标识次级视频（讲座）。
- autoplay：主视频加载后自动播放。
- muted：主视频静音播放，这对于实现autoplay至关重要，因为许多浏览器策略会阻止非静音视频的自动播放。
- loop：主视频循环播放。
- controls：显示视频播放控制器。
- src：指定视频文件的路径。建议使用相对路径或CDN地址。
- onclick="playLectureVid()"：当按钮被点击时，调用JavaScript函数playLectureVid。
CSS 样式
为了实现视频的显示/隐藏切换，我们需要一些基本的CSS样式。次级视频在页面加载时应默认隐藏。
video {
width: 400px; /* 示例宽度，可根据需要调整 */
max-width: 100%; /* 确保视频在小屏幕上也能良好显示 */
}
#lecture {
display: none; /* 默认隐藏次级视频 */
}代码说明：
- #lecture { display: none; }：这是关键，确保次级视频在页面加载时不可见。JavaScript将负责在需要时将其显示出来。
JavaScript 逻辑实现
JavaScript是实现视频切换的核心。我们需要获取两个视频元素的引用，并编写逻辑来处理按钮点击事件和次级视频播放结束事件。
// 获取两个视频元素的引用
var trailer = document.getElementById("trailer");
var lecture = document.getElementById("lecture");
/**
* 当用户点击“播放讲座视频”按钮时调用此函数。
* 负责从主视频切换到次级视频。
*/
function playLectureVid() {
// 显示次级视频，隐藏主视频
lecture.style.display = 'block';
trailer.style.display = 'none';
// 暂停主视频的播放
trailer.pause();
// 播放次级视频
lecture.play();
}
/**
* 监听次级视频的“ended”事件，即次级视频播放结束后触发。
* 负责从次级视频切换回主视频。
*/
lecture.addEventListener("ended", function(e) {
// 显示主视频，隐藏次级视频
trailer.style.display = 'block';
lecture.style.display = 'none';
// 暂停次级视频（虽然已结束，但保持状态清晰）
lecture.pause();
// 播放主视频
trailer.play();
});代码说明：
- 获取元素： document.getElementById()用于获取HTML中具有特定id的元素。
-
playLectureVid()函数：
- 通过修改style.display属性来切换视频的可见性。block使其可见，none使其隐藏。
- trailer.pause()：暂停主视频，确保它不会在后台继续播放。
- lecture.play()：开始播放次级视频。
-
lecture.addEventListener("ended", ...)：
- 为次级视频（lecture）添加一个事件监听器，监听其ended事件。当视频播放到末尾时，此事件会被触发。
- 事件处理函数内部的逻辑与playLectureVid()相反：它显示主视频，隐藏次级视频，并重新开始播放主视频。
注意事项
- 浏览器自动播放策略： 现代浏览器对视频自动播放有严格的策略，通常要求视频必须是静音的（muted属性）才能自动播放。如果主视频需要有声音，并且要自动播放，可能需要用户先进行一次交互（如点击页面任意位置）来解除浏览器的限制。
- 视频加载状态： 在实际应用中，视频加载可能需要时间。可以考虑在视频切换时显示加载指示器，以提升用户体验。可以通过监听loadstart, canplay, waiting等事件来管理加载状态。
-
错误处理： 视频加载或播放过程中可能会发生错误。可以通过监听error事件来捕获这些错误，并向用户提供友好的提示。
trailer.addEventListener('error', function() { console.error('主视频加载或播放失败'); // 可在此处显示错误信息或备用内容 }); lecture.addEventListener('error', function() { console.error('次级视频加载或播放失败'); // 可在此处显示错误信息或备用内容 }); - 性能优化： 如果视频文件较大，考虑使用视频压缩、多种格式（如MP4、WebM）以兼容不同浏览器，并使用preload="auto"或preload="metadata"属性来优化加载。
- 无障碍性： 为视频元素添加title或aria-label属性，为用户提供更好的无障碍体验。
总结
通过使用两个独立的
