让您的 HTML5 视频在移动设备上播放
5.00/5 (2投票s)
当有网页开发者问我如何开始使用 HTML5 视频时，我总会问他们：“为什么？你想解决什么问题？” 几乎每次，我听到的回答都是：“我只是想让我的视频在移动设备上也能播放。” 没问题。我将向你展示如何开始。
当有网页开发者问我如何开始使用 HTML5 视频时，我总会问他们：“为什么？你想解决什么问题？”
几乎每次，我听到的回答都是：“我只是想让我的视频在移动设备上也能播放。”
没问题。
我将向你展示如何开始。
在大多数情况下，视频内容已经以某种格式存在。
一年半以前，我 写过关于 HTML5 视频编解码器的文章，以及为什么我认为 H.264 是明确的领导者。情况并没有真正改变。你仍然需要支持几种编解码器才能与全套现代桌面和移动浏览器兼容，但作为内容创作者，你可以决定如何编码你的视频内容。
请查看 IE Test Drive 视频格式支持页面，了解有关不同浏览器中编解码器如何工作的示例。
实际上，桌面浏览器和网页开发者乐于保留现有的解决方案，使用插件播放现有的视频/音频内容。这很好。只需在浏览器能够原生播放你首选编解码器的情况下，用 HTML5 视频和音频标签来补充即可。
根据我的经验，最受欢迎的移动平台——H.264、AAC 和 MP3——使用 HTML5 视频和音频标签都能得到很好的支持，而这些标签已经得到了大多数人正在使用的技术的支持。
准备好了吗？节省时间、开发成本和精力
首先了解 Microsoft Media Platform (MMP)。该框架是将 Microsoft 端到端媒体解决方案的各个组件粘合在一起的粘合剂。 MMP: Player Framework (根据 Microsoft 公共许可证 Ms-PL 许可使用) 最近增加了对 HTML5 的支持预览 (API 文档)，它允许你用 HTML5 视频体验来补充 Silverlight 播放器框架，并触及更多的移动平台。
相信我，我参与过许多基于 MMP 的大型项目（例如 2011 年橄榄球世界杯的视频平台）。 两个不错的商业解决方案可以为你完成所有工作：JW Player™ (商业使用许可) 和 SublimeVideo® (作为服务的播放器)。
如果你想自己开发播放器怎么办？
使用默认的浏览器控件和浏览器支持的编解码器，自己开发视频解决方案竟然出奇地容易。下面的标记显示了使用 HTML5 播放视频并“回退”到未列出的 YouTube 视频所需的内容。这个 WebMatrix 是一个用于构建 HTML5 标记的轻量级 IDE。使用它——我觉得它很方便。
常见的陷阱！
- 视频 MIME 类型
- 在服务器上设置这些
- Azure Storage Explorer 也允许你对单个文件执行此操作。
- 将 application/octet-stream 更新为以下之一
- .mp4 - “video/mp4?”
- .m4v - “video/m4v”
- .webm - “video/webm”
- .ogg - “application/ogg”
- .ogv - “video/ogg”
- 在 web.config 中设置这些
- <video>回退</video>
- 回退内容（如上面的 YouTube 示例）仅由不支持 <video> 标签的浏览器显示。
- 如果浏览器支持 video 标签但无法播放你请求的任何媒体类型，则回退代码不会执行。你必须使用 JavaScript 使用 canPlayType() 方法检测这种情况并提供回退内容（如下所示）。
- 字节范围请求（搜寻）
- 内容应从兼容 HTTP 1.1 的 Web 服务器提供，以便能够搜寻到视频末尾。
- 如果你的服务器不兼容 HTTP 1.1（例如 Azure Storage），你必须将视频编码时将关键索引帧放在文件内，而不是放在文件末尾，这样搜寻才能正常工作。Expression Encoder 4 Pro 中的“H.264 YouTube HD”配置文件就是这样做的。
- 注意：如果视频文件被 gzip 压缩，搜寻将无法正常工作。由于大多数编解码器中的视频/音频数据已经压缩，gzip/deflate 无论如何都无法为你节省多少带宽。
- IIS 还支持 比特率节流，在交付视频内容时从服务器端为你节省带宽。
实际示例
上周我在 Tech·Ed New Zealand 上做了一个演示，介绍了我朋友 Gus 和 Zach 在 NV Interactive 为新西兰板球协会创建的一个新的视频分析系统。
该解决方案使用 wmv 格式的视频，并通过 Windows Media Plugin 在浏览器中显示。
这个解决方案并不真正支持跨平台，而且肯定无法在移动设备上运行。
Gus 和 Zach 正在使用 H.264 和 MediaElement.js 来扩展他们的视频体验，覆盖更多的用户和设备。
与其他的商业播放器一样，MediaElement.js 为所有播放器使用相同的 HTML/CSS。这意味着 HTML5 和 Flash 播放器体验对所有用户来说看起来都是一样的。
HTML5 视频还需要向何处发展？
目前，当前的 W3C 视频标准（全屏支持、直播流、实时通信、内容保护、元数据和可访问性）尚未涵盖一些关键领域。最近，W3C Web 和 TV 工作坊讨论了这些领域，并对它们将来可能如何被采纳为 Web 标准提出了一些初步想法。
对我来说，直播和自适应流是重要的议题。目前，有三个专有解决方案支持直播和自适应流，我们应该关注它们：
动态自适应流（DASH）目前处于 国际标准草案 阶段。如果它能够免费提供，很可能会获得 W3C 的支持。
DASH 支持：
- 直播、点播和时移内容交付以及播放模式
- 拼接和广告插入
- 字节范围请求
- 用于保护、可访问性和评级的內容描述符
实时通信怎么样？
在 HTML5Labs 上，你可以找到一个 媒体捕获音频原型，它实现了 此 W3C 规范 的音频部分。 HTML5 Labs 是 Microsoft 原型化来自 W3C 等 Web 标准机构的早期不稳定规范的网站。分享这些原型有助于 Microsoft 与开发者社区进行有影响力的讨论，以便根据实施经验为草案规范提供更好的反馈。
他们的下一个原型将支持语音识别，并实现可在 W3C 网站上找到的 Microsoft 提案。在此之后，实验室团队将发布媒体捕获原型的另一项更新，该更新将添加视频捕获功能。
结论
如果你正在 Web 上托管渐进式下载的视频和音频，你应该立即开始支持 HTML5 视频和音频，以扩展你的内容覆盖范围。