HTML5视频编码和跨平台支持指南

在现代网络环境中,视频内容的跨平台播放是一个常见需求。无论是桌面还是移动设备,用户都期望能够无缝地观看视频。本文将介绍如何确保视频内容在各种浏览器和设备上都能流畅播放,包括HTML5视频编码、视频格式支持、自定义播放器开发以及实时通讯技术。

视频编码和格式支持

视频内容通常以某种格式存在。一年半前,写过关于HTML5视频编解码器的文章,认为H.264是明显的领导者。至今,情况并未改变。为了与现代桌面和移动浏览器兼容,仍然需要支持几种编解码器。作为内容创建者,可以决定如何编码视频内容。

桌面浏览器和网络开发者乐于使用现有的插件解决方案来播放现有的视频/音频内容。这很好。只需在浏览器能够原生播放首选的编解码器时,补充HTML5Video和Audio标签即可。

根据经验,最流行的移动平台——H.264、AAC和MP3——使用HTML5Video和Audio标签得到了很好的支持,这些标签已经被大多数人使用。

节省时间、开发成本和神经

首先,了解Microsoft Media Platform (MMP)。MMP是将Microsoft端到端媒体解决方案的各个部分粘合在一起的框架。MMP: Player Framework(根据Microsoft Public License Ms-PL许可使用)最近增加了对HTML5的预览支持(API文档),让可以补充Silverlight播放器框架,提供HTML5视频体验,并覆盖更多的移动平台。

相信,已经在基于MMP的许多大型项目上工作过(比如2011年橄榄球世界杯背后的视频平台)。

两个为做所有工作的好的商业解决方案是JW Player™(商业许可使用)和SublimeVideo®(播放器即服务)。

如果想自己制作播放器

使用浏览器支持的默认控件和编解码器,自己制作视频解决方案出奇地容易。下面的标记显示了需要在HTML5中播放视频,并“回退”到YouTube上的未列出视频。

WebMatrix是一个轻量级的IDE,用于构建HTML5标记。使用它——发现它很有用。

常见问题!

视频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>Fall-Back</video>

回退内容(如上文的YouTube示例)仅由不支持<video>标签的浏览器显示。

如果浏览器支持video标签,但不能播放请求的任何媒体类型,回退代码不会触发。必须使用JavaScript来检测这种情况,并提供回退内容(如下所示)。

字节范围请求(寻求)

内容应该由兼容HTTP 1.1的Web服务器提供,以实现视频的提前搜索。如果服务器不是HTTP 1.1兼容的(例如Azure Storage),必须用关键索引帧编码视频,而不是在文件的末尾,以便提前搜索仍然有效。Expression Encoder 4 Pro中的“H.264 YouTube HD”配置文件就是这样做的。

注意:如果视频文件是gzip压缩的,搜索就不会工作。由于大多数编解码器的视频/音频数据已经压缩,gzip/deflate不会为节省太多的带宽。

IIS还支持比特率节流,以节省服务器在传输视频内容时的带宽。

现实世界的例子

上周在Tech·Ed新西兰的一次会议上,介绍了朋友们在NV Interactive的Gus和Zach为新西兰板球创建的新视频分析系统。

该解决方案使用wmv格式的视频,并使用Windows Media插件在浏览器中显示。这个解决方案在跨平台方面并不真正得到支持,而且肯定不能在移动设备上工作。

Gus和Zach正在使用H.264和MediaElement.js来扩展他们视频体验的用户和设备数量。

像其他商业播放器一样,MediaElement.js对所有播放器使用相同的HTML/CSS。这意味着HTML5和Flash播放器体验对所有用户来说看起来都是一样的。

HTML5视频需要去哪里?

目前,W3C视频标准(全屏支持、实时流媒体、实时通信、内容保护、元数据和可访问性)还没有解决几个关键领域。最近,W3C Web和TV研讨会涵盖了这些领域,并提供了一些早期的想法,关于它们如何可能被采纳为未来的网络标准。

实时和自适应流媒体是最关心的两个大话题。目前,有三种专有解决方案支持实时和自适应流媒体,应该关注:

  • Microsoft Smooth Streaming
  • Apple HTTP Live Streaming
  • Adobe HTTP Dynamic Streaming

动态自适应流媒体通过HTTP(DASH)目前是草案国际标准。它看起来可能会得到W3C的支持,如果它是免费提供的。

DASH支持:

  • 实时、按需和时移内容交付和技巧模式
  • 拼接和广告插入
  • 字节范围请求
  • 用于保护、可访问性和评级的内容描述符

实时通信怎么样?

在HTML5Labs上,可以找到一个Media Capture Audio Prototype,它实现了W3C规范的音频部分。HTML5 Labs是Microsoft原型早期和不稳定的规范草案的网站,如W3C。分享这些原型有助于Microsoft与开发者社区进行有根据的讨论,以便根据这种实现经验提供更好的反馈。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485