jwplayer播放器

1. 关于jwplayer

直接上原话吧:JW Player provides the world's most popular video player with over 18 billion monthly streams.这里是官网,价格可以看这里,可能需要翻下下墙。

我们的使用的目的:开发一款专业的flash以及h5播放器对于一个前端只有实习生的团队来说还是非常难的。一开始用github上的开源项目使用了一下,也自己编译做了去水印想着的工作,但别的功能用着还是不爽。我们在做直播系统时觉得用200$/Y来换一个直接可以使用的播放器挺好的,可以用于我们直播视频RTMP流的播放器,以及录播视频MP4的播放。

在使用前我们的前端实习生做了一个调研,结论是jwplayer是最适合我们又有直播又有录播的播放器了,有开源项目,也有需要付费的。我们买的是企业版,使用的是web这块的,如果想用android和ios的播放器,还需要购买更加专业的版本。

2. 购买版的

购买版的好处是很多事情很省心,例如皮肤以及遇到了问题可以随时咨询开发团队的人。jwplayer6与7的版本我觉得一个最大的修改就是皮肤。6是用xml配置的,7则是用css.目前内核我还动不了,只能在播放功能和界面上做一些调整。主要是skin和加功能。

2.1 我需要做的事

  1. 有一些css不如我们别的模块的css优先级高导致了变形。我需要调整这些css。
  2. 加入更多的播放器功能,例如:加入倍速播放,例如可以以1.5倍速度看录播。

整体代码

html中<div id="myElement"></div>
js中


var jwplayerEle = jwplayer("myElement");
jwplayerEle.setup({
    file: src.rtmpS,
    image: src.bgS,
    key: "购买时拿到的key,貌似可以多处使用",
    ogo: {hide: true},
    skin: {name: "vapor"},
    aspectratio: "16:9",
    width: "100%",
    startparam: "start",
    allowfullscreen: 'false',
    stretching: 'uniform',
    logo: {hide: true},
    rtmp: {bufferlength: 2}
});

2.2 皮肤

2.2.1 可选的皮肤
默认的皮肤还比较丑的,官方其实提供了10个左右的版本基本可以满足需求了,下面是图: jwplayer播放器skin 我选择的是Vapor这个,因为和有道学堂的背景色比较像 jwplayer vapor skin

2.2.2 如何使用

通过下面的代码可以引入皮肤 html中<div id="myElement"></div>
js中


skin: {
    name: "vapor"
}

这个名字可以取上面图中的任何一下。默认会有jwplayer的cdn上取vapor相关的css。那我想放在自己国内的cdn上怎么弄呢? 可以把内容copy出来,再上传到自己的cdn,上传完css后,在html页面中直接引用这个css,播放器加载到了本地的,就不会再去默认的jwplayer cdn上取了,因为有可能会被墙掉。另外也可以写成这样:


skin: {
    name: "vapor"
    url: "你自己的cdn css地址"
}

不过不推荐这样,因为这个是在初始化播放器了再去加载,会影响播放响应时间。

2.2.3 css冲突

我遇到一个问题是播放时间的标签以及进度条背景丢失,我在css后加了自己的样式,优先级弄高一些就好了。

2.3 加更多的按钮

有一个需求是:看录播还是和直播一样的速度会导致学生复习效率低下。我需要加一个快进功能。这个功能在jwplayer中是没有的。所以我需要加一个button。还有有这么一个函数叫:addButton,说明如下:

有了按钮和事件,我可以加相应的功能了。jwplayer对于点播支持两种模式,一种是flash播放器,一种是生成h5的video标签,用原生的播放器。只有原生的播放器可以进行视频加速,所以很幸运的是我们当时录播用了mp4格式,可以通过设定playbackRate来控制播放速度。

2.3.1 代码

addButton接口如下:
.addButton(icon, label, handler, id)

icon (String): 图片地址,推荐是20x20

label (String): hover上去的标题

handler (Function): 点击时的函数

id (String): id,通过这个可以识别出button

//这里加入了一个button   jwplayerEle.addButton("http://livetest.youdao.com/live/images/icon_network.png","X1.1",modifyPlaybackRate, "playbackRate");

//定义一下加速
 function modifyPlaybackRate(nowSpeed) {
        var videoList = $('#myElement video');
        if (videoList && videoList.length === 1) {
            if (videoList[0].playbackRate === 1) {
                videoList[0].playbackRate = 1.2;
                $("[button='playbackRate'] span").html('X1.4');
            } else if (videoList[0].playbackRate === 1.2) {
                videoList[0].playbackRate = 1.4;
                $("[button='playbackRate'] span").html('X1.0');
            } else if (videoList[0].playbackRate === 1.4) {
                videoList[0].playbackRate = 1;
                $("[button='playbackRate'] span").html('X1.2');
            }
        }
    }

3. 开源版的

开源的也提一下,毕竟最开始我们使用的还是开源版的。可能会有水印,得找了github上的源码自己重新编译。比较郁闷的是有一些小问题需要注意的,所以在这里记录一下。

3.1 去水印

前期准备

1 下载ant,下载flex_sdk,我这里是4.1.
2 下载jwplayer
3. 修改jwplayer/build.properties

# The location of the Flex SDK on your sytem.
flexsdk =E:\\dev\\jwplayer\\ant\\bin\\flex_sdk_4.1.0.16076A

....

# Extension for Windows setups
execextension =.exe  

1 注意windows开发中的分隔符,如果写成/或者\你会发现压根不执行flex,说是调用失败。

flexsdk =E:\\dev\\jwplayer\\ant\\bin\\flex_sdk_4.1.0.16076A  

2 注意通常你下载的jdk或者jre是64位的,这样会报调用jvm.dll出错,这个时候下载一个32位的就好了。注意修改一下环境变量。

complie:  
     [exec] Error loading: ..\jre\bin\server\jvm.dll
     [exec] Result: 6

3 jwplayer代码中的版本问题,随便改一个版本吧

\player\PlayerVersion.as(5): 列: 52 错误: 访问的属性 version 未定义。
修改jwplayer\view\View.as中的
protected functionsetupComponents():void {  
varn:Number = 0;  
setupComponent(_components.captions,n++);  
setupComponent(_components.display,n++);  
_playlist= _components.playlist;  
_playlistLayer.addChild(_playlistas DisplayObject);  
//这行代码需要注释
//setupComponent(_components.logo, n++);
setupComponent(_components.controlbar,n++);  
cbLayer= n;  
setupComponent(_components.dock,n++);  
}
comments powered by Disqus