选择视频播放器:前五名的功能和规格

市面上不乏现成的在线视频播放器(OTS). 输入“视频播放器”这个词就流行了 GitHub 代码存储库站点，您将看到1000多个结果. 尽管有这么多球员可供选择, it remains a challenge to find a video player that meets specific technical and business requirements.

在本文中, 在你选择一名球员之前，我将引导你完成你需要回答的问题, and then I’ll review the following players that are most commonly used for professional online video deployments:

作为视频解决方案架构师, 我最常使用JW球员 6, 但是每种产品都有不同的功能和局限性, 仓促决定使用OTS播放器可能最终会让你付出代价.

本文探讨了为web播放而构建的视频播放器, 不一定是在移动设备上的原生应用中运行的玩家代码库. Hosted video services such as YouTube, Vimeo, and Brightcove are also not covered in this article.

确定您的需求

当客户邀请我设计一个新项目时, a discovery process is invaluable to create the discussions and decisions that will define the optimal viewing experience and to determine the supporting elements of content delivery. 以下四个主要问题将帮助你选择合适的玩家:

内容:你的视频的本质是什么?
功能:你的玩家需要做什么?
管道:如何对视频进行编码和部署?
商务:你们的预算和时间表是什么?

内容

如果你是这本杂志的订阅者, 很可能你正在处理两种类型的视频内容:视频点播(VOD)和直播. 你可能听说过, HTML5 web browsers do not consistently handle all of the formats and codecs used to deliver these types of video. 不管你的玩家选择是什么, you should deliver your content in at least two formats to reach more viewers on more devices -- and picking those two formats is largely a matter of the important targets you want to reach. 图1 - 3 说明可用于在线视频播放的流行编解码器和格式, 以及本文中涉及的玩家提供的支持.

图1. 播放器支持HTTP传输

图2. 播放器支持HTTP流传输

图3. 播放器支持实时流传输

绝大多数在线视频都是VOD. Every player discussed in this article can play VOD content served as a progressive download over HTTP (content playback can begin when a small buffer has downloaded, 不需要下载整个视频文件)或作为字节范围请求. 所有当前的HTML5浏览器都可以使用范围请求, 其中浏览器请求视频文件的特定片段, 使玩家能够寻找视频的任何部分，并迅速恢复播放. 基于flash的视频渲染, 然而, 通常只能加载HTTP视频作为渐进式下载, 使即时搜索和更快的启动时间变得困难. Having other Flash rendering capabilities for adaptive streaming protocols in an OTS player can be vital to its success.

关于直播内容, the lack of live streaming support without the use of a plug-in has left a huge vacuum in the HTML5 offering. 事实上, most HTML5 desktop browsers can’t handle live streaming at all -- Apple Safari browser (Mac version only) is the only desktop browser that natively supports its HTTP 在线直播 (HLS) format, while newer builds of Google Chrome with requisite media extensions installed can play video formatted for MPEG-DASH (or dynamic adaptive streaming over HTTP) delivery. 如果您需要向您的观众部署直播流, 那么您的OTS视频播放器的呈现模式应该回到基于插件的播放, 例如由Adobe Flash player驱动的播放器代码库. 在本文后面的部分, 我将讨论OTS玩家如何拥有不同的操作模式, 基于渲染播放器的浏览器.

本文中讨论的所有视频播放器都有一个Flash备份, 但大多数玩家无法在所有设备和台式机上一致地处理直播流. Low-latency Flash-based live streams are typically served with RTMP (real-time messaging protocol), 但是很多媒体服务器, 如Wowza媒体服务器或Adobe Media Server, 可以提供实时流在Adobe的HTTP动态流(HDS)格式以及HLS. 大多数OTS视频播放器无法播放Adobe HDS视频, 因为Flash Player插件本身不摄取HTTP流媒体内容.

注:外部ActionScript 3.解析HTTP清单和解码HTTP视频片段需要0个库. Adobe’s Open Source Media Framework (OSMF) is still available for implementation in custom players, but many web developers have strayed from using OSMF as it is no longer actively maintained by Adobe.

在移动设备上, Apple HLS是唯一一直支持直播或视频点播内容的流媒体格式. 《百家乐软件》在iOS上运行良好, but on Android -- which relied heavily on the Adobe Flash Player for handling live streams -- the implementation of HLS playback is barely useable.

没有一个OTS播放器有一个优雅的解决方案来处理Android的实时流. And this scenario is not one that any player codebase can solve -- it’s a problem that browser vendors need to address. MPEG-DASH很可能成为未来Android直播的部署选项, 但目前使用的绝大多数安卓设备都不能使用DASH技术.

特性

The next consideration for choosing an OTS player is making sure it can perform all of the functions you need for your video content. 本文介绍的所有玩家都可以执行以下任务:

基本回放，包括播放/暂停，查找，时间显示
海报架
音量控制
正常和全屏显示
通过CSS和自定义图像蒙皮

但是，并非所有的OTS播放器都提供以下功能:

关闭字幕/字幕
多语言音轨选择
播放列表
广告插入
水印/覆盖
响应布局一致的相对球员的大小

当我总结每个OTS球员时，我将指出可用的专业选项.

管道

第三个发现领域是对现有视频部署流程的检查, 具体看一下你是如何编码和传送视频格式的. 在理想的情况下, 您选择的OTS播放器将与您现有的基础设施一起工作, 但在某些情况下，您可能需要修改该基础设施以与OTS播放器一起工作.

例如, 如果你只提供宣传视频内容, 或任何类型的视频内容，可以自由分发(e.g., 产品支持视频, 信息内容), 你用一个高质量的比特率AVC/H编码你所有的内容.264 MP4预设, 并且你将所有内容托管在web服务器或Amazon AWS S3上, 您可能会有各种各样的OTS播放器可供使用. 本文最后讨论的每个玩家都将在此场景中发挥作用.

然而, 如果你正在编码多个比特率，通过HLS和HDS进行自适应流传输, 你正在使用Akamai这样的内容分发网络(CDN), 您可能需要使用高级授权的OTS播放器，如JW player或Flowplayer.

同样的, 如果你正在使用任何专业协议，如RTMP进行直播或视频点播, 您需要确保OTS播放器支持交付机制. 仅仅因为OTS播放器有Flash回退并不意味着它一定可以播放RTMP视频, 或者摄取一个指定RTMP流的自适应流清单. Wowza媒体服务器, 例如, 可以采取多个比特率的给定视频，并使用RTMP提供清单, HLS, HDS, 流畅的流媒体格式. 但是，JW球员只能摄取服务器提供的RTMP和HLS清单.

业务

作为调查OTS玩家的人, one or both of these is likely true: You don’t have the resources or budget to build a custom video player from scratch, or you’re curious if you’re paying too much for a custom video player when an OTS player will suffice. 虽然这里介绍的许多OTS播放器都是很少或免费的, you may find that the premium OTS players are worth the one-time license fee or the annual subscription price.

当你在评估付费玩家和那些不需要授权费的玩家时, 记住价格与成本的对比. 确定, 免费玩家也许能够获得你所需要的90%的功能, but if you’re spending more time and money to finesse that free player to gain 100% of the features (and perhaps to a degree below that of a premium player), 结果可能会让你付出更多的代价. 玩家缺少特定的皮肤定制也会损害你的品牌推广.

最后, consider the time and resources necessary to transition from your existing video player to something new. 例如, 如果一个OTS播放器是用类似JavaScript对象表示法(JSON)的数据模式初始化的, 您可能需要对底层内容管理系统进行更改. 如果这样的改变是必要的, hopefully the parameters that you use for one player can be easily mapped to another player’s parameters.

评估OTS选手

定义了需求之后，您就可以寻找满足您需求的OTS播放器了. 正如我提到的, there is a wide and growing field of player codebases available; this article only covers some of the more popular options. 我对这些球员都进行了测试, 我会推荐它们用于广泛的用例. 我编译了几个例子来说明特色的OTS玩家的用法 videorx.com/players.

一个球员的基本知识

现在, let’s review the standard nuts and bolts that you can expect to see in each of the five OTS players covered here, 包括格式规范, 呈现模式, 皮肤选项, 云vs。. 自托管代码.

指定的格式

我在评测中所包含的每个OTS播放器都能够接收多个视频编解码器, 包括AVC / H.264和VP8，以及它们各自的视频格式，MP4和WebM. The players can also use standard HTML5

The uniqueness of each OTS player lies in how its JavaScript code overwrites the handling of these native HTML5 tags to work consistently and reliably from one browser to the next, 从手机到桌面. (标准到此为止!)使用这种基于标签的方法通常只适合基本的VOD播放, 在没有使用特殊协议或流的情况下. 为更多的“引擎盖下”控制, 每个OTS播放器都可以通过JavaScript初始化设置和源参数. 这个设置代码是OTS玩家的显著不同之处.

渲染视频

由于HTML5的多样性, non-HTML5, 以及目前使用的插件浏览器, any browser-based video player needs to have to at least two 呈现模式s: native HTML5 video rendering as well as a Flash-assisted 呈现模式. 一些OTS播放器，如MediaElement.js, have an additional 呈现模式 via a Microsoft Silverlight player codebase to play streaming formats on Windows Phone. Each OTS player discussed in this article uses JavaScript to determine which 呈现模式 to use, 根据您指定的格式, 使用哪个浏览器查看视频, 以及安装了哪些插件.

Note: If JavaScript is not enabled on a browser, standard OTS player configuration will likely fail. 您的目标受众不太可能禁用JavaScript. 大多数网站都严重依赖JavaScript来实现正确的交互功能.

给玩家剥皮

The standard approach to customizing the style and format of any HTML element is CSS (cascading style sheet), 并且每个玩家都可以使用CSS样式来控制其外观的大多数方面, 从玩家控制到叠加位置. 如果您喜欢使用JavaScript来控制外观, 每个播放器都有一个API. You can even hide the built-in OTS player controls (often called “chromeless” mode) offered by OTS players and create your own custom control layer.

Players may also use a separate skin file to specify the controls that are shown and the graphic files (PNG, JPEG, SVG)用于控件和覆盖. 例如，JW球员使用皮肤.XML文件，该文件不仅指定控件的顺序和位置, 但它也将PNG图形表示为base64编码的实体! 换句话说，您甚至不需要引用外部图形文件.

下一个页面