视频云web播放器样式和组件自定义 | WebRTC编风网
0

视频云web播放器样式和组件自定义

已有 415 人阅读此文 - - 网易视频云(微信ID:vcloud163) - 李烈明(网易前端资深开发工程师)

一、播放相关的事件

很多播放组件的状态都和播放事件有关联,因此要开发播放组件,一定要先了解我们播放器能提供哪些播放相关的事件。我们知道html5 video标签能提供下面这些事件:

1

二、播放器初始化的说明

我们使用neplayer(id,options,cb)或者video标签中的data-setup这两种方式来初始化播放器。初始化过程除了播放相关的逻辑,还有就是默认播放组件的添加。聪明的同学在使用chrome查看播放器元素的时候可以看到,我们给video标签外面包裹了一个div,这个div就是我们播放器的容器。容器下面的子元素首先就是咱们的播放器元素(html5模式下的video标签或者flash模式下的object),后面的子元素们就是我们的各种播放组件啦。

播放容器div会在不同状态下动态添加一些很有用的class,合理运用这些class,可以简便咱们的组件的开发,在下面罗列一些。

2

chrome查看容器下dom结构截图:

3

三、默认组件的说明

前面提到,我们的播放器提供了一些默认的组件,下面对这些组件做些粗略的说明。

· posterImage: 这个组件用来在播放之前显示一张静态图片。 播放容器的vjs-has-started类来控制它的隐藏。

· bigPlayButton: 大播放按钮,默认左上角,可以通过给video标签添加vjs-big-play-centered类来居中。播放开始后也会隐藏掉。

· loadingSpinner: 在waiting或者seeking事件出现后会显化于在屏幕中间然后转圈圈。 它的出现其实依赖于容器div的vjs-waiting或者vjs-seeking类

· errorDisplay: 在播放错误出现时显示一个错误信息

· controlBar: 控制条。包含了很多的播放控制相关的子组件。下面再详细说明

这几个是默认使用的播放控件,假如您嫌弃它们,可以在初始化选项中配置舍弃,例如您要实现自己的bigPlayButton,您可以配置{“bigPlayButton”:false},这样默认的bigPlayButton就不会被添加到播放器中,然后您可以使用后面我们将会提到的添加播放组件相关api来添加自定义的大播放按钮。

controlBar组件的说明

controlBar组件是咱们播放器的默认控制条组件,它包含了一系列的子组件。

4

从左到右,当前默认显示的子组件有 playToggle volumeMenuButton progressControl liveDisplay remainTimeDisplay,fullscreenToggle。要注意的是liveDisplay组件在播放直播流时才显示,下图为点播示例:

5

currentTimeDisplay,timeDivider,durationDisplay是相对于 remainingTimeDisplay的另一套组件,后者只显示当前播放时间,前者还显示总时间。若要显示成前者这种模式,即 ‘当前时间/总时间’,可以在初始化播放器选项中配置:

6

playbackRateMenuButton,设置播放速率的组件。当前只有html5模式下才支持设置播放速率。

7

使用’当前时间/总时间’组件,并添加播放速率控制的效果图:

8

四、默认组件样式的修改

上面说到,每个组件和子组件都在播放容器中有对应的标签元素,这些元素上面都有各自的class类,因此要修改默认组件的样式,定义自己喜欢的皮肤将会灰常简单,您只需要写几句覆盖默认样式的css即可。 我们播放组件中的图标,使用的都是字体图标,意味着您可以随意修改图标的大小,颜色。来个例子:

9

可以得到:

10

五、添加自定义组件

终于到本文的核心内容了,直接先上一盘栗子。 给咱们播放器的默认controlBar组件中加入一个新子组件,一个刷新的按钮,用来刷新播放器。 No more talk, show me the code !!!

11

效果如下: (the button is so ugly,why not a icon? do not mind these detail,then we can be good friends. -_-)

12

例子虽然简单,但是已经覆盖了自定义组件全部相关接口。 本来这里我还想搞一个多清晰度选择的menu,但是因为时间有限(其实是懒),所以就不弄了,但是真要做也大同小异。 下面再来一个自定义错误提示的栗子,然后完美收官。

13

14

15

 

0
相关文章!