HTML 5视频播放失败

Question

此处可用的公共链接： https : //muwadev3.millikin.edu/muportal/public/streamingMedia.jsp? id =ab7cfb20f103a44a49d14244ae0a3f2f

HTML元素是由JSP代码动态生成的，我已经多次修改了其输出以尝试其他操作。 它应类似于以下内容：

<video id="viewer" width="320" height="240" controls preload>
    <source id="mp4Src" src="https://muwadev3.millikin.edu/muportal/secure/pages/features/StreamingMedia/index.jsp?f=ab7cfb20f103a44a49d14244ae0a3f2f.mp4" type="video/mp4">
    <source id="webmSrc" src="https://muwadev3.millikin.edu/muportal/secure/pages/features/StreamingMedia/index.jsp?f=ab7cfb20f103a44a49d14244ae0a3f2f.mp4" type="video/webm">
    <source id="oggSrc" src="https://muwadev3.millikin.edu/muportal/secure/pages/features/StreamingMedia/index.jsp?f=ab7cfb20f103a44a49d14244ae0a3f2f.mp4" type="video/ogg">

一段时间以来，我一直在努力构建相当于跨设备视频播放服务器的服务器。 我正在Tomcat / JSP环境中工作，该环境可处理上载用户的文件，将文件转换为幕后的mp4 / webm / ogg，并应在完成转换后在查看器页面上提供视频文件。

经过一番游戏和构建后，一切正常（最终！）。 但是，我的问题是视频标签的播放。 我的预期行为是加载带有单独源标签的视频标签，每个源标签都包含对一种文件类型的引用。 在仔细阅读了“ Dive Into HTML5”和其他各种资源后，我确定获取这些格式应涵盖所有主要的浏览器。 我想为用户提供下载和查看功能，因此可以通过一个单独的页面直接使它们可用（该页面运行良好），该页面立即开始下载文件。 查看页面来自此下载页面，它们之间的链接似乎很完美，在检查页面上的请求时始终返回200状态。

尽管有参考资料的指示，但在Firefox和Chrome之间播放的唯一文件是该文件的ogg版本-而我希望使用其他文件类型作为后备，一般都支持webm。 Chrome禁用了控件，并显示了黑色背景，而Firefox则抱怨“找不到支持格式和MIME类型的视频”以及“由于文件损坏而无法播放视频”。

我知道我的文件可以正常工作，因为从下载页面检索它们可以使我在VLC中播放它们而没有问题，并且在使用相同的转换后，我可以直接从主机上直接播放它们。

我可以找到的唯一不一致之处是，尽管服务页面正确地将标头设置为video / webm，但文件实用程序（在Linux或Windows上通过GNUWin32）将webm文件报告为“ application / octet-stream”。

通常，我会使用Chrome开发者工具和Firebug来获取调试信息，但是这些信息总体上是无济于事的，无法提供有关为何解码失败或为什么播放不起作用的任何信息。

我已确保Tomcat服务器配置在其mime类型配置中包括每个文件类型，并尝试在源标签中使用和不使用编解码器声明，还尝试移动到src =“ path / to / serving / page视频标签上的“”属性（消除了源元素）。

已在当前的Chrome版本42.0.2311.152 m，Canary版本44.0.2402.0 canary（64位），Firefox ESR 31.5.3和Firefox Developer Edition 39.0a2上进行了测试。

因此，有没有比通过插拔选项来解决HTML 5视频播放更好的方法了？ 我有什么明显的遗漏吗？

Answer 1

好的，问题在于视频源/文件下载页面，该页面无法正常运行。 使用Notepad ++或vi检查视频文件后发现，下载的文件在其余数据之前包含两个空行，这与本地计算机上类似编码文件的内容相同。

源页面是一个类似以下内容的JSP：

<% //set imports %>
<% //set content headers %>
<% //send file with FileInputStream reading from hard drive %>

每个JSP输出块都包含一个回车符，该回车符输出两个空行，然后再输出编码文件的内容。 解决此问题的一种方法是像这样将标签涂抹在一起

<% //set imports
%><% //set content headers
%><% //output file%>

这也可以通过以下方式完成：

<%@ page trimDirectiveWhitespaces="true" %>