HTML中如何点击video元素切换视频源且保持页面样式与播放尺寸不变

你之前的代码失效有两个核心原因：

1. 只有切换到视频B的逻辑，没有切换回视频A的判断
2. 修改video的src属性后，需要主动调用load()加载新视频、play()触发播放，新视频才会正常显示

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>视频切换效果</title>
    <style>
        /* 可自定义修改视频宽高，切换时尺寸保持不变 */
        #video-01 {
            width: 800px;
            height: 450px;
            object-fit: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="video">
    <video id="video-01" autoplay muted playsinline>
        <source src="demo/1.mp4" type="video/mp4"/>
    </video>
</div>

<script>
const video = document.getElementById('video-01');
// 替换为你自己的两个视频路径
const videoPathA = 'demo/1.mp4';
const videoPathB = 'demo/2.mp4';
let isPlayingA = true;

video.addEventListener('click', () => {
    // 切换视频路径
    video.src = isPlayingA ? videoPathB : videoPathA;
    // 翻转状态
    isPlayingA = !isPlayingA;
    // 加载并播放新视频
    video.load();
    video.play();
})
</script>
</body>
</html>

使用说明 #

• 代码中的demo/1.mp4是默认自动播放的视频A，demo/2.mp4是点击切换的视频B，替换为你自己的视频实际存储路径即可生效
• 可以修改style部分的width和height数值调整视频显示尺寸，切换视频时尺寸会保持一致
• 视频标签的muted是静音属性，当前主流浏览器要求视频必须静音才能自动播放，如果你不需要自动播放，可以同时删除autoplay和muted两个属性

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