HTML与JavaScript视频跳转播放异常：无法加载本地视频

你的问题出在page3.html使用了静态模板语法{{video}}，但纯HTML无法解析这种变量。index.html已经正确将视频ID通过URL查询参数传递过去了，只需要在page3.html中用JavaScript读取该参数，动态设置视频源即可。

修改后的page3.html代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Page3.html</title>
    </head>
    <body>
        <h1>Page3.html</h1>
        <video width="560" height="315" controls>
        <source id="videoSource" src="" type="video/mp4">
        </video>
        <script>
            // 获取URL中的查询参数
            const params = new URLSearchParams(window.location.search);
            const videoId = params.get('video');
            // 找到视频源元素并设置路径
            if (videoId) {
                document.getElementById('videoSource').src = `video/${videoId}.mp4`;
                // 加载并播放视频（可选）
                document.querySelector('video').load();
            }
        </script>
    </body>
</html>

说明 #

• 给<source>标签添加id="videoSource"，方便JS快速定位元素
• 使用URLSearchParams读取URL中的video参数，这是现代浏览器支持的标准API
• 若获取到有效视频ID，直接拼接正确的视频路径并赋值给<source>的src属性
• 调用video.load()确保视频源更新后重新加载

index.html的代码无需修改，已经正确完成了参数传递的工作。

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