Flask应用中JavaScript无法更新视频标签内容问题求助

在Flask项目中，通过JavaScript点击按钮获取视频URL并更新<video>标签的src，控制台打印数据正常，服务器日志显示206 Partial Content（说明视频文件已被成功请求），但视频标签始终显示空白。

相关代码 #

Flask路由（app.py）

import os
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/get_video_url')
def get_video_url():
    video_path = "static/output.mp4"
    if not os.path.exists(video_path):
        print("not found")
        return jsonify({'video_url': "no"})
    return jsonify({'video_url': "output.mp4"})

if __name__ == '__main__':
    app.run(debug=True)

JavaScript交互代码

document.getElementById('playButton').addEventListener('click', async () => {
    try {
        const response = await fetch('/get_video_url');
        const data = await response.json();
        console.log(data)
        const videoUrl = data.video_url;
        console.log(videoUrl)
        // Set the video source
        if (videoUrl === "no") {
            document.getElementById('myVideo').innerHTML = `<p>video not found</p>`;
        } else {
            document.getElementById('myVideo').src = "/static/output.mp4";
            document.getElementById('myVideo').style.display = 'block';
        }
    } catch (error) {
        console.error('Error fetching video URL:', error);
    }
});

服务器日志片段

127.0.0.1 - - [19/Feb/2024 21:51:42] "GET /static/output.mp4 HTTP/1.1" 206 -

1. 手动触发视频加载与播放 #

更新src后，浏览器不会自动重新加载资源并播放，需显式调用load()和play()方法：

else {
    const videoElement = document.getElementById('myVideo');
    videoElement.src = "/static/output.mp4";
    videoElement.style.display = 'block';
    videoElement.load(); // 强制重新加载视频资源
    // 触发播放，同时处理浏览器自动播放限制
    videoElement.play().catch(err => console.log('播放失败:', err));
}

2. 使用<source>标签替代直接设置src #

部分浏览器对<video>标签的结构有要求，改用<source>标签兼容性更好：

else {
    const videoElement = document.getElementById('myVideo');
    videoElement.innerHTML = `<source src="/static/output.mp4" type="video/mp4">`;
    videoElement.style.display = 'block';
    videoElement.load();
    videoElement.play().catch(err => console.log('播放失败:', err));
}

3. 处理浏览器自动播放限制 #

现代浏览器禁止无交互的自动播放，即使是按钮触发的场景也可能受限。可以给视频标签添加muted属性（允许静音播放）：

<video id="myVideo" muted></video>

或者在播放失败时，提示用户手动点击视频区域播放。

4. 检查视频编码兼容性 #

服务器返回206仅说明文件可访问，若视频编码不被浏览器支持也会显示空白。用FFmpeg将视频转成通用的H.264+AAC编码：

ffmpeg -i input.mp4 -vcodec h264 -acodec aac static/output.mp4

5. 规避浏览器缓存 #

浏览器可能缓存了旧的无效资源，给URL添加时间戳参数强制刷新：

videoElement.src = `/static/output.mp4?t=${new Date().getTime()}`;

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