本文介绍com.justep.cordova.plugin.videoPlayer插件,以及如何用该插件做一个功能强大的视频播放器。

插件概述

该插件分别集成了百度视频SDK(iOS)金山视频SDK(Android),支持目前常见主流格式音频视频的播放(mp4、avi、wmv、flv、mkv、mov、 rmvb 等),性能强大,加载速度快,并且可以由用户自定义播放器的控制界面,极大程度方便了开发者的使用。

由于iOS端集成的是百度视频SDK,我们需要申请账号并开通权限: 您需要登录百度云,在安全认证页面 获取 AK/SK

插件API

navigator.videoPlayer.open(args,onSuccess,onError);

描述:打开视频播放器

参数:

args:Object – 打开播放器时候的参数,内部结构如下

{
url:String – 播放资源的路径,网络url或者本地路径
title:String -设置播放时显示的标题
position:Object -设置播放器的位置及大小,缺省则为全屏播放
{
“x”:Number – 播放器左上角的 x 坐标,
“y”:Number – 播放器左上角的 y 坐标,
“w”:Number – 播放器的宽度,
“h”:Number – 播放器的高度,
}
willPlayCallBack:Function – 可选参数 监听开始播放的回调
didPauseCallBack:Function – 可选参数 监听暂停播放的回调
didFinishCallBack:Function – 可选参数 监听播放完成的回调
timerCallBack:Object – 可选参数 播放到某一时间点的回调,只精确到秒,示例:      {timer:3,func:callBackFunction}
customBtnInfo:Array -可选参数,添加自定义播放器的控制按钮,缺省则只有播放/暂停按钮(左下方)+全屏按钮(右下方)+返回按钮(左上方)。自定义按钮的点击事件,示例如 下:

[
{position:”top”,onClick:func1, tag:”topBtn1″},
{position:”top”,onClick:func2, tag:”topBtn2″},//播放器上方控制条最多添加4个按钮,并且按照数组中元素的顺序,从右至左依次添加
{position:”bottom,left”,onClick:func3,tag:”bottomBtn1″},
{position:”bottom,right”,onClick:func4,tag:”bottomBtn2″},//播放器下方控制条最多可以添加两个按钮,一个在时间进度条的左边,一个在时间进度条的右边
{position:”left”,onClick:func5,tag:”leftBtn1″},
{position:”right”,onClick:func6,tag:”rightBtn1″},//播放器左边界和右边界分别可以添加两个竖直排列的按钮
{position:”back”,onClick:func8,tag:”backBtn”},//左上方的返回按钮,默认点击事件是退出全屏或者关闭当前页面,用户也可以自定义该按钮的点击事件
] //注意:如果想自定义某个按钮的图片,只需要到图片所在的文件夹下替换掉对应的图片即可,不可修改图片的名字。

}

onSuccess:Function – 播放器成功打开的回调

onError:Function – 播放器打开失败的回调

navigator.videoPlayer.destory(onCallback);

描述:关闭播放器,当调用该API后会销毁播放器对象。

navigator.videoPlayer.closeOrExitFullScreen();

描述:如果当前播放器为全屏状态,则退出全屏状态,如果为非全屏,则关闭播放器。

navigator.videoPlayer.seek(timer,onSuccess,onError);

描述:实现跳转播放,拖拽播放器上的进度条也可以实现跳转播放的效果

参数:

timer:Number –  要跳转至的时间点,单位:s

onSuccess: Function – 成功的回调

onError:Function – 失败的回调

navigator.videoPlayer.pause(onCallback);

描述:暂停播放

navigator.videoPlayer.resume(onCallback);

描述:恢复播放