HTML5视频播放失败

此处有可用的公共链接：

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">

<%@ page trimDirectiveWhitespaces="true" %>

一段时间以来，我一直致力于构建一个跨设备的视频播放服务器。我在Tomcat/JSP环境中工作，该环境负责上传用户的文件，在后台将文件转换为mp4/webm/ogg，并应在转换完成后将视频文件显示在查看器页面上

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

尽管参考资料中有说明，但Firefox和Chrome之间播放的唯一文件是该文件的ogg版本——而我预计webm将得到普遍支持，使用其他文件类型作为备用文件。Chrome禁用了控件，显示黑色背景，而Firefox则抱怨“没有找到支持格式和MIME类型的视频”以及“由于文件损坏，视频无法播放”

我知道我的文件可以正常工作，因为从下载页面检索它们可以让我在VLC中毫无问题地播放它们，同样，在使用相同的转换后，我可以直接从主机播放它们

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

通常我会使用Chrome Developer工具和Firebug来获取调试信息，但这些都是毫无帮助的，无法提供任何关于解码失败或播放不起作用的信息

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

这已经在当前的Chrome版本42.0.2311.152 m、Canary版本44.0.2402.0 Canary（64位）、Firefox ESR 31.5.3和Firefox开发者版39.0a2上进行了测试

---

那么——有没有比用不同的选项插上和咯咯叫更好的方法来解决HTML5视频播放故障呢？我遗漏了什么明显的东西吗？

好的，所以问题是视频源/文件下载页面，它工作得不完美。用记事本++或vi检查视频文件显示，下载的文件在其余数据之前包含两个空行，这与我本地机器上类似编码文件的内容相同

源页面是沿着

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

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

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

这也可以通过以下方式实现：

<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">

<%@ page trimDirectiveWhitespaces="true" %>

---

问题描述在随附文本中。我已经编辑了这篇文章以包含一个代码示例。