HTML5视频无法播放求助：链接正常但网页中无法播放

问题描述 #

直接访问视频链接http://68.178.166.65:3080/AgADcw48可正常播放，但将其嵌入以下HTML5代码后，测试页面显示“Your browser does not support HTML video”，无法播放：

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="http://68.178.166.65:3080/AgADcw48" type="video/mp4">
  
  Your browser does not support HTML video.
</video>

<p>
Video courtesy of 
<a href="" target="_blank"></a>.
</p>

</body> 
</html>

可能原因分析 #

• 混合内容限制：测试页面采用HTTPS协议，而视频链接为HTTP协议，现代浏览器出于安全考虑，会阻止HTTPS页面加载非安全的HTTP资源。
• 跨域资源共享(CORS)缺失：VPS服务器未配置CORS响应头，浏览器因同源策略拒绝加载跨域视频资源。
• 视频编码/容器不兼容：虽然指定了type="video/mp4"，但视频内部的编码格式（如视频编码为H.265而非H.264）可能不在浏览器支持范围内。
• MIME类型配置错误：VPS服务器返回的视频MIME类型不是标准的video/mp4，导致浏览器无法识别资源类型。

解决方案 #

1. 解决混合内容问题 #

• 升级视频协议为HTTPS：在VPS上配置SSL证书（如Let's Encrypt免费证书），让视频通过HTTPS协议对外提供。
• 临时测试方案：在Chrome浏览器中打开chrome://flags/#unsafely-treat-insecure-origin-as-secure，添加视频的HTTP地址并重启浏览器，解除混合内容限制（仅用于测试，不推荐生产环境）。

2. 配置CORS响应头 #

根据VPS使用的Web服务器，添加CORS配置：

• Nginx：在视频所在的server或location块中添加：

  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  add_header Access-Control-Allow-Headers Content-Type;
  

• Apache：在.htaccess或服务器配置文件中添加：

  Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET,POST,OPTIONS"
  Header set Access-Control-Allow-Headers "Content-Type"
  

3. 验证并修复视频编码兼容性 #

使用ffmpeg工具检查视频编码信息：

ffmpeg -i http://68.178.166.65:3080/AgADcw48

确保视频采用H.264视频编码和AAC音频编码（HTML5 Video支持最广泛的组合）。若编码不兼容，执行转码命令：

ffmpeg -i 原视频文件路径 -c:v libx264 -c:a aac -strict -2 兼容版视频.mp4

4. 修正MIME类型配置 #

• Nginx：在http或server块中添加MIME类型映射：

  types {
      video/mp4 mp4;
  }
  

• Apache：确保配置文件中包含：

  AddType video/mp4 .mp4
  

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