HTML 5 视频播放失败答案

【问题标题】：HTML 5 Video Playback FailsHTML 5 视频播放失败
【发布时间】：2015-05-15 18:43:22
【问题描述】：

这里可用的公共链接：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 中毫无问题地播放它们，并且我可以在使用相同的转换后直接从我的主机上播放它们。

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

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

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

已在当前 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 视频播放问题？我错过了什么明显的东西吗？

【问题讨论】：

问题描述在包含的文本中。我已编辑帖子以包含代码示例。

标签： html google-chrome firefox video cross-browser

【解决方案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" %>

【讨论】：