一
web播放器的介绍
视频云提供的web播放器是以为基础，加入了视频云自身的一些业务逻辑封装并针对性的优化而成。当前视频云直播流支持rtmp,http-flv,hls三种格式，点播支持mp4,http-flv,hls三种格式。
在pc端浏览器上，我们优先使用flash模式来播放直播和点播的各种视频格式，以提供更强大的流控制和更好的稳定性。在移动端浏览器上，使用html5模式，支持hls播放和点播mp4播放。 我们的sdk接口也支持设置:["html5","flash"]来在优先使用html5模式videojs播放器，值得一提的是html5模式下的hls播放并不稳定，依浏览器不同可能更容易出现播放问题。在即将到来的下一个版本的web sdk中，我们将可能接入hls.js和flv.js。前者将提供html5模式下hls流更强大的稳定性，后者给咱们带来http-flv流在移动端浏览器播放的黑科技(喜大普奔，orz)。
近来收到很多客户自定义播放器皮肤或者组件的需求，但官网的帮助文档中缺乏对这一块儿的细致说明，本文由此而生，希望能借由本文加深大家对咱们web播放器的理解，同时能更容易的接入咱们sdk，满足各自的业务需求。
我们的播放器提供了一些默认的组件，包括,,,,等，通过名字，您应该已经能大概明白这些组件的提供功能，下面会做更详细的介绍。这些默认组件应该能满足大部分用户的基础需求，但是在很多场景下，咱们需要更深度的制定符合业务需求的样式和功能。接下来会介绍一些相关api，以及两个简单示例videojs播放器，由浅入深，都是干货。
二
播放相关的事件
很多播放组件的状态都和播放事件有关联，因此要开发播放组件，一定要先了解我们播放器能提供哪些播放相关的事件。我们知道html5 video标签能提供下面这些事件：
二
播放器初始化的说明
我们使用(id,,cb)或者video标签中的data-setup这两种方式来初始化播放器。初始化过程除了播放相关的逻辑，还有就是默认播放组件的添加。聪明的同学在使用查看播放器元素的时候可以看到，我们给video标签外面包裹了一个div，这个div就是我们播放器的容器。容器下面的子元素首先就是咱们的播放器元素(html5模式下的video标签或者flash模式下的),后面的子元素们就是我们的各种播放组件啦。
播放容器div会在不同状态下动态添加一些很有用的class，合理运用这些class，可以简便咱们的组件的开发，在下面罗列一些。
查看容器下dom结构截图：
三
默认组件的说明
前面提到，我们的播放器提供了一些默认的组件，下面对这些组件做些粗略的说明。
这几个是默认使用的播放控件，假如您嫌弃它们，可以在初始化选项中配置舍弃,例如您要实现自己的,您可以配置{"":false}，这样默认的就不会被添加到播放器中，然后您可以使用后面我们将会提到的添加播放组件相关api来添加自定义的大播放按钮。
组件的说明
组件是咱们播放器的默认控制条组件，它包含了一系列的子组件。
从左到右，当前默认显示的子组件有 ,。要注意的是组件在播放直播流时才显示，下图为点播示例：
,,是相对于 的另一套组件，后者只显示当前播放时间，前者还显示总时间。若要显示成前者这种模式，即 '当前时间/总时间'，可以在初始化播放器选项中配置：
on，设置播放速率的组件。当前只有html5模式下才支持设置播放速率。
使用'当前时间/总时间'组件，并添加播放速率控制的效果图：
四
默认组件样式的修改
上面说到，每个组件和子组件都在播放容器中有对应的标签元素，这些元素上面都有各自的class类，因此要修改默认组件的样式，定义自己喜欢的皮肤将会灰常简单，您只需要写几句覆盖默认样式的css即可。 我们播放组件中的图标，使用的都是字体图标，意味着您可以随意修改图标的大小，颜色。来个例子：
可以得到：
五
添加自定义组件
终于到本文的核心内容了，直接先上一盘栗子。 给咱们播放器的默认组件中加入一个新子组件，一个刷新的按钮，用来刷新播放器。 No more talk, show me the code !!!
效果如下: (the is so ugly,why not a icon? do not mind these ,then we can be good . -_-)
例子虽然简单，但是已经覆盖了自定义组件全部相关接口。 本来这里我还想搞一个多清晰度选择的menu，但是因为时间有限(其实是懒)，所以就不弄了，但是真要做也大同小异。 下面再来一个自定义错误提示的栗子，然后完美收官。