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，并且在完成转换后，应该使视频文件在查看器页面上可用。

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

尽管有参考资料的迹象，Firefox和Chrome之间唯一的文件是文件的ogg版本--而我预计webm一般会被支持，使用其他文件类型作为后盾。Chrome禁用了控件，显示了一个黑色的背景，而Firefox给出了“没有支持格式和MIME类型的视频”和“由于文件损坏而不能播放视频”的抱怨。

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

我能发现的唯一不一致之处是文件实用程序(在Linux或Windows上通过GNUWin32)将webm文件报告为“application/octet”，尽管服务页面正确地将头设置为视频/webm。

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

我确保Tomcat服务器配置包括mime类型配置中的每个文件类型，在源标记中尝试使用或不使用编解码器声明，并尝试移动到视频标记上的src="path/ to /serving/page“属性(删除源元素)。

这已经在当前Chrome版本42.0.2311.152米、金丝雀版44.0.2402.0金丝雀(64位)、火狐ESR 31.5.3版和火狐开发者版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" %>