HTML5视频播放器为空白，输出控制台出现GET错误。

Question

我试图在一个普通的html页面上播放一个标签中的视频。我在Premiere中有一个视频，我尝试将其导出为webm和mp4 (h264)，它们与html文件位于FTP服务器上的同一个目录中。无论我呈现哪个编解码器，播放机都保持空白(白色)，并在输出控制台中显示错误：

得到错误

如您所见，视频文件显然位于FTP服务器上的同一个目录中：

FTP服务器上的文件

GET错误已经被404错误所取代，有时是在webm和h264中使用不同的预置时。据我所知，webm和h264特别适合html5网络播放器，adobe有很多不同的预置，所以我真的不明白为什么这必须是一个棘手的问题来解决。找不到有同样问题的人是不可能的，这更让我恼火。

我们使用Azure作为网站托管，所以如果有任何默认设置禁止视频显示或类似，告诉我！

编辑:这是video_presentation.html的html代码

<video width="100%" height="100%" controls>
  <source src="course_introduction.webm" type="video/webm">
  <source src="course_introduction.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

请帮帮忙！提前谢谢。

Answer 1

尝尝这个

对于以上提到的多个视频剪辑，为了最大限度地实现HTML5视频浏览器的兼容性，您需要制作3种不同版本的视频。您可以将多个HTML5视频嵌入到HTML5视频元素中的网页中，下面是多个视频的HTML5视频标记示例：

<video width="640" height="360" controls>
   <source src="ftp or http://path/course_introduction.mp4" type="video/mp4" />
   <source src="ftp or http://path/course_introduction.webm" type="video/webm" />
   <source src="ftp or http://path/course_introduction.ogv" type="video/ogg" />
</video> 

好好享受！

Answer 2

您可能需要将mime类型添加到站点.htaccess文件中：

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm