如何解决HTML嵌入MP4在树莓派Chromium及Windows Chrome刷新后无法播放问题？

1. 修复Chrome刷新后视频加载失效问题 #

Windows Chrome首次加载正常、刷新后失效，大概率是缓存或视频元素加载状态异常。可以通过添加随机参数规避缓存，并手动触发视频加载：

<video autoplay muted loop width="240" height="120" id="video-player">
    <source src='{{ media.mediafile.url }}?v=' + Date.now()
            type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const video = document.getElementById('video-player');
    video.load(); // 强制重新加载资源
    video.play().catch(err => console.log(err)); // 捕获播放失败的具体错误
});
</script>

2. 适配树莓派Chromium的视频编码兼容性 #

树莓派对MP4编码的兼容性要求更严格，即使指定了codecs参数，也可能存在实际编码不匹配的情况。用ffmpeg重新转码视频，确保符合低性能设备的支持标准：

ffmpeg -i input.mp4 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -b:a 128k output.mp4

• baseline编码 profile 和 level 3.0 是树莓派等设备稳定支持的配置
• 转码后替换原视频文件，再测试树莓派的显示效果

3. 检查Django媒体文件服务配置 #

确保媒体文件的服务逻辑正确：

• 开发环境：在settings.py中确认MEDIA_URL和MEDIA_ROOT配置无误，同时在urls.py添加媒体路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 现有路由配置
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

• 生产环境：不要用Django自带的静态文件服务，改用Nginx或Apache直接托管媒体文件，避免框架层的请求处理异常。

4. 调整视频标签属性适配浏览器策略 #

给视频标签添加playsinline属性，规避部分浏览器的全屏播放限制：

<video autoplay muted loop playsinline width="240" height="120">
    <source src='{{ media.mediafile.url }}'
            type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

5. 关闭树莓派Chromium的硬件加速 #

树莓派的GPU硬件加速可能导致视频解码异常，关闭步骤：

1. 打开Chromium，输入chrome://settings/system
2. 关闭「使用硬件加速模式（如果可用）」选项
3. 重启浏览器后测试视频显示

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