videoPlayer

来自于：官方立即使用

play open setPath start pause stop close show hide fullScreen cancelFullScreen forward rewind seekTo setBrightness getBrightness setVolume getVolume addEventListener removeEventListener setRect openPlay onBack isFullscreen onPause onResume customBtnIsSelected setCustomBtnSelected setCustomBtnCancelSelected setCustomBtnVisible videoCapture

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

videoPlayer 封装了视频播放功能（不支持纯音频播放）。可快进、快退设置播放位置等操作，亦可设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。使用本模块时可把本模块当做一个 frame 添加在 window 或 frame 上。Android 平台上支持的的视频文件格式有：MP4、3gp；iOS 平台上支持的视频文件格式有：MOV，MP4，M4V。

本模块封装了三套播放方案：

一，通过调用 play 接口，直接打开一个自带默认播放界面的播放器，可通过 setPath 改变播放的视频资源；

二，通过 open 接口，打开一个纯播放器界面，再配合 frame 自定义完整的播放页面，可通过setPath、start、pause、stop、show、hide、fullScreen、cancelFullScreen、forward、rewind、seekTo、addEventListener、removeEventListener、setRect 接口控制播放操作。

三，通过 openPlay 接口，打开一个自带界面的播放器，可通过start、pause、show、hide、isFullscreen、customBtnIsSelected、setCustomBtnSelected、setCustomBtnCancelSelected、setCustomBtnVisible 接口控制播放操作。

另外，本模块提供了截取制定视频制定时刻画面的接口 videoCapture。

videoPlayer - 图1

　实例widget下载地址

play

打开一个自带界面的视频播放器，本播放器为全屏横屏显示，支持屏幕随设备自动旋转。用户单击播放器时，会弹出 foot 和 head 导航条，再次单击则关闭之。仅 setPath 接口对本接口打开的播放器有效

play({params}, callback(ret))

params

texts：

  • 类型：JSON 对象
  • 描述：（可选项）聊天输入框模块可配置的文本
  • 内部字段：
  1. {
  2.     head: {          //（可选项）JSON 对象；顶部文字
  3.         title: ''    //（可选项）字符串类型；顶部标题文字
  4.     }
  5. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块的样式设置
  • 内部字段：
  1. {
  2.     head:{                           //（可选项）JSON对象；播放器顶部导航条样式    
  3.        bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；顶部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  4.        height: 44,                   //（可选项）数字类型；顶部导航条的高；默认：44
  5.        titleSize: 20,                //（可选项）数字类型；顶部标题字体大小；默认：20
  6.        titleColor: '#fff',           //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
  7.        backLeftMargin:10,            //（可选项）数字类型；返回按钮左边距；默认：15
  8.        backTopMargin:10,             //（可选项）数字类型；返回按钮距离header的顶部距离；默认：在header中居中
  9.        backSize: 44,                 //（可选项）数字类型；顶部返回按钮大小；默认：44
  10.        backImg:'fs://img/back.png',  //（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
  11.        setSize: 44,                  //（可选项）数字类型；顶部右边设置按钮大小；默认：44
  12.        setImg:'fs://img/set.png'     //（可选项）字符串类型；顶部右边设置按钮背景图片，要求本地路径（widget://、fs://）；默认：设置小图标
  13.     },  
  14.     foot:{                           //（可选项）JSON对象；播放器底部导航条样式    
  15.        bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  16.        height: 44,                   //（可选项）数字类型；底部导航条的高；默认：44
  17.        playSize: 44,                 //（可选项）数字类型；底部播放/暂停按钮大小；默认：44
  18.        playImg:'fs://img/back.png',  //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
  19.        pauseImg:'fs://img/back.png', //（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
  20.        nextSize: 44,                 //（可选项）数字类型；底部下一集按钮大小；默认：44
  21.        nextImg:'fs://img/back.png',  //（可选项）字符串类型；底部下一集按钮的背景图片，要求本地路径（widget://、fs://）；默认：下一集按钮图标
  22.        timeSize: 14,                  //（可选项）数字类型；底部时间标签大小；默认：14
  23.        timeColor:'#fff',              //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#fff
  24.        sliderImg:'fs://img/slder@2x.png',//（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标((在iOS上需要添加二倍图或者三倍图,否则会出现毛边))
  25.        progressColor: '#696969',      //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
  26.        progressSelected: '#76EE00',   //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
  27.        verticalImg:'',                //（可选项）字符串类型；底部竖屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：竖屏按钮图标              
  28.         horizontalImg:'',             //（可选项）字符串类型；底部横屏按钮的背景图片，要求本地路径（widget://、fs://）；默认：横屏按钮图标
  29.               lockImg:'fs://img/slder@2x.png',  //（可选项）字符串类型；锁按钮的背景图片，要求本地路径（widget://、fs://）；默认：锁按钮图标
  30.       unlockImg:'fs://img/slder@2x.png',  //（可选项）字符串类型；解锁按钮的背景图片，要求本地路径（widget://、fs://）；默认：解锁按钮图标
  31.     }
  32. }

path：

  • 类型：字符串
  • 描述：（可选项）文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget

autoPlay：

  • 类型：布尔
  • 描述：（可选项）打开时是否自动播放
  • 默认值：true（自动播放）

coverImg：

  • 类型：字符串类型
  • 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

autorotation:

  • 类型：布尔
  • 描述：（可选项）视频播放页面是否支持自动旋转（横竖屏），若为 false 则手动点击右下角按钮旋转
  • 默认值：true（根据设备当前方向自动适配旋转）

audio:

  • 类型：布尔
  • 描述：（可选项）播放的资源是否是音频文件，若是则开始播放后不移除封面图 coverImg
  • 默认值：false

scalingMode：（该参数已废弃）

  • 类型：字符串
  • 描述：（可选项）缩放模式 该参数仅支持iOS
  • 默认值：’scaleAspectFit’

  • 取值范围：

    • scaleNone (scalingModeNone)
    • scaleToFill（填充）
    • scaleAspectFit（适应）
    • scaleModeFill(scalingModeFill)

seekBarDragable:

  • 类型：布尔
  • 描述：（可选项） 播放进度条是否可以拖动
  • 默认：true

hideStatusBar:

  • 类型：布尔
  • 描述：（可选项） 是否隐藏状态栏（该参数仅支持android）
  • 默认：false

isFull:

  • 类型：布尔
  • 描述：（可选项）是否全屏
  • 默认：true

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType:        //字符串类型；回调事件类型，取值范围如下：
  3.                       //show（打开成功并显示）
  4.                       //back（返回）
  5.                       //play（播放）
  6.                       //pause（暂停）
  7.                       //next （下一集）
  8.                       //failed（播放失败）
  9. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.play({
  3.     texts: {
  4.         head: {
  5.             title: '顶部文字'
  6.         }
  7.     },
  8.     styles: {
  9.         head: {
  10.             bg: 'rgba(0.5,0.5,0.5,0.7)',
  11.             height: 44,
  12.             titleSize: 20,
  13.             titleColor: '#fff',
  14.             backSize: 44,
  15.             backImg: 'fs://img/back.png',
  16.             setSize: 44,
  17.             setImg: 'fs://img/set.png'
  18.         },
  19.         foot: {
  20.             bg: 'rgba(0.5,0.5,0.5,0.7)',
  21.             height: 44,
  22.             playSize: 44,
  23.             playImg: 'fs://img/back.png',
  24.             pauseImg: 'fs://img/back.png',
  25.             nextSize: 44,
  26.             nextImg: 'fs://img/back.png',
  27.             timeSize: 14,
  28.             timeColor: '#fff',
  29.             sliderImg: 'fs://img/slder.png',
  30.             progressColor: '#696969',
  31.             progressSelected: '#76EE00',
  32.             lockImg:'fs://img/slder@2x.png', 
  33.            unlockImg:'fs://img/slder@2x.png', 
  34.         }
  35.     },
  36.     path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4', //（可选项）字符串类型；文档的路径，支持网络和本地（fs://）路径；默认：未传值时不播放
  37.     //在 android 平台上不支持 widget://
  38.     autoPlay: true //（可选项）布尔类型；打开时是否自动播放；默认：true（自动播放）
  39. }, function(ret, err) {
  40.     if (ret) {
  41.         alert(JSON.stringify(ret));
  42.     } else {
  43.         alert(JSON.stringify(err));
  44.     }
  45. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

open

打开一个视频播放器（类似一个frame）

open({params}, callback(ret, err))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320, //（可选项）数字类型；模块的宽度；默认：所属的 Window 或 Frame 的宽度
  5.     h: 300  //（可选项）数字类型；模块的高度；默认：w的3/4
  6. }

bg：

  • 类型：字符串
  • 描述：（可选项）字符串类型；视频背景颜色，支持#、rgb、rgba (在切换视屏为了防止闪屏,请根据自己的视频调节颜色)
  • 默认：’#fff’

path：

  • 类型：字符串
  • 描述：（可选项）文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget

autoPlay：

  • 类型：布尔
  • 描述：（可选项）打开时是否自动播放
  • 默认值：true（自动播放）

scalingMode：

  • 类型：字符串
  • 描述：（可选项）缩放模式 该参数仅支持ios
  • 默认值：’scaleAspectFit’

  • 取值范围：

    • scaleNone (scalingModeNone)
    • scaleToFill（填充）
    • scaleAspectFit（适应）
    • scaleModeFill(scalingModeFill)

coverImg：

  • 类型：布尔
  • 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

loop：

  • 类型：布尔
  • 描述：（可选项）是否循环播放 该参数仅支持ios
  • 默认值：false

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed：

  • 类型：布尔
  • 描述：（可选项）模块是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     status:           //布尔类型；是否打开播放组件并显示，true|false；Will be deprecated in ther future
  3.     duration:         //数字类型；视频总时长，单位为s，仅当 status 为 true并且eventType=playing 时有值  限Android
  4.     eventType:        //字符串类型；交互事件类型，取值范围：
  5.                       //show（打开成功并显示）
  6.                       //error（播放器打开失败）
  7.                       //playing（开始播放）
  8.                       //failed（播放失败）
  9. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.open({
  3.     path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
  4.     scalingMode:'scaleToFill'
  5. }, function(ret, err) {
  6.     if (ret.status) {
  7.         alert(JSON.stringify(ret));
  8.     } else {
  9.         alert(JSON.stringify(err));
  10.     }
  11. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setPath

设置音/视频的文件路径，对 open 和 play 打开的视频播放器有效。

setPath({params}, callback(ret))

params

path：

  • 类型：字符串
  • 描述：文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget

bg：

  • 类型：字符串
  • 描述：（可选项）字符串类型；视频背景颜色，支持#、rgb、rgba (在切换视屏为了防止闪屏,请根据自己的视频调节颜色)
  • 默认：’#fff’

coverImg：

  • 类型：布尔
  • 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

title：

  • 类型：字符串
  • 描述：（可选项）当设置 play 接口打开的视频时，本参数表示设置该视频的标题，本参数仅对 play 接口有效
  • 默认值：原标题

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      status:            //布尔类型；路径是否重设成功，true|false
  3.     duration:          //数字类型；视频总时长，单位为s，仅当 status 为 true 时有值
  4. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setPath({
  3.     path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4',
  4.     coverImg: ''
  5. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

start

开始播放，只对 open 和 openPlay 接口打开的视频播放器有效

start()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.start();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

pause

暂停播放，只对 open 和 openPlay 接口打开的视频播放器有效

pause()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.pause();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

stop

停止播放，仅对 open 打开的视频播放器有效

stop()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.stop();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

close

关闭播放器 ，对 open、openPlay、play 打开的视频播放器均有效

close()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.close();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

show

显示视频播放视图，仅对 open 和 openPlay 打开的视频播放器有效

show()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.show();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

hide

隐藏视频播放视图，仅对 open 和 openPlay 打开的视频播放器有效

hide()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.hide();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

fullScreen

全屏播放（横屏模式），仅对open打开的播放器有效

fullScreen()

Params

orientation：

  • 类型：字符串
  • 描述：转屏方向
  • 默认：right
  • 取值范围：
    • right 向右旋转
    • left 向左旋转

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.fullScreen({
  3.     orientation:'right'
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

cancelFullScreen

取消全屏播放，仅对open打开的播放器有效

cancelFullScreen()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.cancelFullScreen();

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

forward

快进，仅对open打开的播放器有效

forward({params})

params

seconds：

  • 类型：数字
  • 描述：快进的秒数

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.forward({
  3.     seconds: 5
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

rewind

快退，仅对open打开的播放器有效

rewind({params})

params

seconds：

  • 类型：数字
  • 描述：快退的秒数

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.rewind({
  3.     seconds: 5
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

seekTo

跳转，仅对open打开的播放器有效

seekTo({params})

params

seconds：

  • 类型：数字
  • 描述：跳转到音视频播放的秒数

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.seekTo({
  3.     seconds: 20
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setBrightness

设置屏幕亮度，对open、openPlay、play打开的播放器有效

setBrightness({params})

params

brightness：

  • 类型：数字
  • 描述：（可选项）设置的屏幕的亮度，取值范围：0-100，在 iOS 平台上设置的是系统屏幕亮度。Android 平台上设置的本应用内的屏幕亮度
  • 默认值：80

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setBrightness({
  3.     brightness: 50
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0及 更高版本

getBrightness

获取当前屏幕亮度值，对open、openPlay、play打开的播放器有效

getBrightness(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     brightness:            //数字类型；当前屏幕亮度值
  3. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.getBrightness(function(ret, err) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setVolume

设置音量，对open、openPlay、play打开的播放器有效

setVolume({params})

params

volume：

  • 类型：数字
  • 描述：（可选项）音量大小，取值范围：0-1
  • 默认值：0

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setVolume({
  3.     volume: 0.6
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

getVolume

获取当前播放音量，对open、openPlay、play打开的播放器有效

getVolume(callback(ret, err))

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     volume:            //数字类型；当前音量值
  3. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.getVolume(function(ret, err) {
  3.     if (ret) {
  4.         alert(JSON.stringify(ret));
  5.     } else {
  6.         alert(JSON.stringify(err));
  7.     }
  8. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

addEventListener

添加动作监听(当全屏或者fixed为true且页面不能被左右滑动时有效)，对open打开的播放器有效

addEventListener({params}，callback(ret, err))

params

name：

  • 类型：字符串
  • 描述：（可选项）所要监听的动作名称
  • 取值范围：
    • ‘leftUp’：播放器靠左的二分之一内的上滑事件，每滑动5（百分比）回调执行一次
    • ‘leftDown’：播放器靠左的二分之一内的下滑事件，每滑动5（百分比）回调执行一次
    • ‘rightUp’：播放器靠右的二分之一内的上滑事件，每滑动5（百分比）回调执行一次
    • ‘rightDown’：播放器靠右的二分之一内的下滑事件，每滑动5（百分比）回调执行一次
    • ‘swipeLeft’：播放器上的左滑事件，每滑动5（百分比）回调执行一次
    • ‘swipeRight’：播放器上的右滑事件，每滑动5（百分比）回调执行一次
    • ‘click’：点击播放器事件（单击手势）
    • ‘doubleClick’：双击播放器事件（单击手势）
    • ‘play’：播放事件，包括开始播放（start）、正在播放（playing）、暂停（pause）、停止（stop）、播放完成（complete），在回调里用 eventType 区分。播放事件为 playing 时，回调函数每秒执行四次

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.    eventType:             //字符串类型；播放事件类型，仅当 name 为 play 时有值；取值范围如下：
  3.                           //start（开始播放）
  4.                           //playing（正在播放）
  5.                           //pause（播放暂停）
  6.                           //stop（播放停止）
  7.                           //complete（播放完成）
  8.    current:               //数字类型；当前播放位置，单位为s，仅当 name 为 play，eventType 为 playing 时有值
  9. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.addEventListener({
  3.     name: 'leftUp'
  4. }, function(ret, err) {
  5.     if (ret) {
  6.         alert(JSON.stringify(ret));
  7.     } else {
  8.         alert(JSON.stringify(err));
  9.     }
  10. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

removeEventListener

移除动作监听，对open打开的播放器有效

removeEventListener({params})

params

name：

  • 类型：字符串
  • 描述：（可选项）所要移除的监听的动作名称
  • 取值范围：
    • ‘leftUp’： 播放器靠左的二分之一内的上滑事件，每滑动5（百分比）回调执行一次
    • ‘leftDown’： 播放器靠左的二分之一内的下滑事件，每滑动5（百分比）回调执行一次
    • ‘rightUp’： 播放器靠右的二分之一内的上滑事件，每滑动5（百分比）回调执行一次
    • ‘rightDown’： 播放器靠右的二分之一内的下滑事件，每滑动5（百分比）回调执行一次
    • ‘swipeLeft’： 播放器上的左滑事件，每滑动5（百分比）回调执行一次
    • ‘swipeRight’： 播放器上的右滑事件，每滑动5（百分比）回调执行一次
    • ‘click’： 点击播放器事件（单击手势）
    • ‘doubleClick’： 双击播放器事件（单击手势）
    • ‘play’： 播放事件，包括开始播放（start）、正在播放（playing）、暂停（pause）、停止（stop）、播放完成（complete）

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.removeEventListener({
  3.     name: 'leftUp'
  4. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

setRect

设置视频播放器位置、尺寸，以及是否全屏，对open打开的播放器有效

setRect({params}, callback(ret, err))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,         //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,         //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320,       //（可选项）数字类型；模块的宽度；默认：open中设置的宽度
  5.     h: 300        //（可选项）数字类型；模块的高度；默认：open中设置的高度
  6. }

fullscreen：

  • 类型：布尔类型
  • 描述：（可选项）模块的位置及尺寸是否全屏（true不显示状态栏，false显示状态栏）
  • 默认值：false（不随全屏）

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setRect({
  3.     rect: {
  4.         x: 0,
  5.         y: 0,
  6.         w: 320,
  7.         h: 300
  8.     },
  9.     fullscreen: true
  10. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

openPlay

打开一个自带界面的视频播放器，本播放器全屏时横屏显示，支持屏幕随设备自动旋转。用户单击播放器时，会弹出 foot 和 head 导航条，再次单击则关闭之。

openPlay({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320, //（可选项）数字类型；模块的宽度；默认：所属的 Window 或 Frame 的宽度
  5.     h: 300  //（可选项）数字类型；模块的高度；默认：w的3/4
  6. }

texts：

  • 类型：JSON 对象
  • 描述：（可选项）聊天输入框模块可配置的文本
  • 内部字段：
  1. {
  2.     head: {          //（可选项）JSON 对象；顶部文字
  3.         title: ''    //（可选项）字符串类型；顶部标题文字
  4.     }
  5. }

centerPlayBtn:

  • 类型：JSON对象
  • 描述：（可选项）视频未播放或者视频暂停时在视频播放器中间显示（不传不显示）
  1. {
  2.     size:30,                                // 数字类型；按钮大小；默认：30
  3.     iconPath:'widget://image/playIcon.png'  // 字符串类型；图标路径；
  4. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块的样式设置
  • 内部字段：
  1. {
  2.     head:{                           //（可选项）JSON对象；播放器顶部导航条样式    
  3.        bg: 'rgba(161,161,161,0.5)',  //（可选项）字符串类型；顶部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  4.        height: 44,                   //（可选项）数字类型；顶部导航条的高；默认：44
  5.        y:20 ,                        // (可选项）数字类型；距离模块顶部的距离；默认：20(仅支持iOS)
  6.        titleSize: 20,                //（可选项）数字类型；顶部标题字体大小；默认：20
  7.        titleColor: '#fff',           //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
  8.        backSize: 44,                 //（可选项）数字类型；顶部返回按钮大小；默认：44
  9.        backImg:'fs://img/back.png',  //（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
  10.        customButtons:[{
  11.           w:30,  //（可选项）数字类型；顶部右边设置按钮大小；默认：30
  12.           h:30,  //（可选项）数字类型；顶部右边设置按钮大小；默认：30
  13.           marginRight:10, //（可选项）数字类型；按钮右边距；默认：10
  14.           img:'fs://img/img1.png',//（可选项）字符串类型；顶部右边设置自定义按钮(未选中状态)，要求本地路径（widget://、fs://）；
  15.           imgSelected:'fs://img/img2.png',//（可选项）字符串类型；顶部右边设置自定义按钮(选中状态)，要求本地路径（widget://、fs://）；
  16.           isSelected:false,               //（可选项）布尔类型；顶部右边设置自定义按钮是否被选中，默认：false； 
  17.           }]
  18.     },  
  19.     foot:{                               //（可选项）JSON对象；播放器底部导航条样式    
  20.        bg: 'rgba(161,161,161,0.5)',      //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  21.        height: 44,                       //（可选项）数字类型；底部导航条的高；默认：44
  22.        playSize: 44,                     //（可选项）数字类型；底部播放/暂停按钮大小；默认：44
  23.        playImg:'fs://img/play.png',      //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
  24.        pauseImg:'fs://img/pause.png',     //（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标
  25.        timeSize: 14,                     //（可选项）数字类型；底部时间标签大小；默认：14
  26.        timeColor:'#fff',                 //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#fff
  27.        sliderImg:'fs://img/slder@2x.png',   //（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标(在iOS上需要添加二倍图或者三倍图,否则会出现毛边)
  28.        progressColor: '#696969',         //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
  29.        progressSelected: '#76EE00'       //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
  30.        rotationSize:44                   //（可选项）数字类型；底部横屏/竖屏按钮大小；默认：foot的高度
  31.        verticalImg:'fs://img/vertical.png',  //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，竖屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：竖屏按钮图标
  32.       horizontalImg:'fs://img/horizontal.png', //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，横屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：横屏按钮图标
  34.       lockImg:'fs://img/slder@2x.png',  //（可选项）字符串类型；锁按钮的背景图片，要求本地路径（widget://、fs://）；默认：锁按钮图标
  35.       unlockImg:'fs://img/slder@2x.png',  //（可选项）字符串类型；解锁按钮的背景图片，要求本地路径（widget://、fs://）；默认：解锁按钮图标
  37.     }
  38. }

path：

  • 类型：字符串
  • 描述：（可选项）文档的路径，支持网络和本地（fs://）路径，在 android 平台上不支持 widget

autoPlay：

  • 类型：布尔
  • 描述：（可选项）打开时是否自动播放
  • 默认值：true（自动播放）

coverImg：

  • 类型：布尔
  • 描述：（可选项）封面图路径，播放器打开尚未播放时的封面图，要求本地路径（widget://、fs://）

autorotation:

  • 类型：布尔
  • 描述：（可选项）视频播放页面是否支持自动旋转（横竖屏），若为 false 则手动点击右下角按钮旋转(ios不支持此参数，如果需要视频自动旋转,在iPhone手机上打开自动旋转按钮即可)
  • 默认值：true（根据设备当前方向自动适配旋转）

useGestureControl:

  • 类型：布尔
  • 描述：（可选项）视频播放页面是否使用手势控制 (亮度，声音，快进快退)
  • 默认值：true

seekBarDragable:

  • 类型：布尔
  • 描述：（可选项） 播放进度条是否可以拖动
  • 默认：true

audio:

  • 类型：布尔
  • 描述：（可选项）播放的资源是否是音频文件，若是则开始播放后不移除封面图 coverImg
  • 默认值：false

isShowBack：

  • 类型：布尔
  • 描述：（可选项）在竖屏时是否显示back按钮(与横屏无关)
  • 默认值：true（显示）

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed：

  • 类型：布尔
  • 描述：（可选项）模块是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.      status:           //布尔类型；是否打开播放组件并显示，true|false；Will be deprecated in ther future
  3.     duration:         //数字类型；视频总时长，单位为s，仅当 status 为 true 时有值
  4.     eventType:        //字符串类型；交互事件类型，取值范围：
  5.                       //show（打开成功并显示）
  6.                       //error（播放器打开失败）
  7.                       //play（开始播放）
  8.                       //failed（播放失败）
  9.                       //pause（暂停）
  10.                       //finish(播放完成)
  11.                       //back   (返回)
  12.               //landscape 播放器横屏事件
  13.               //portrait  播放器竖屏事件
  14.    value:false        //( true代表横屏，false代表竖屏当前是横屏还是竖屏，仅字段为back时有效)
  15.     btnIndex: 0,      //数字类型，用户自定义按钮的点击index，从右到左排列
  16.     isSelected:true   //布尔类型；用户自定义按钮是否被选中
  17. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.openPlay({
  3.   rect:
  4.     {   x: 0,
  5.         y : 0,
  6.         w : 320,
  7.         h: 250
  8.     },
  9.     texts: {
  10.         head: {
  11.             title: '顶部文字'
  12.         }
  13.     },
  14.     styles: {
  15.         head: {
  16.             bg: 'rgba(0.5,0.5,0.5,0.7)',
  17.             height: 44,
  18.             y:20,
  19.             titleSize: 20,
  20.             titleColor: '#fff',
  21.             backSize: 44,
  22.             backImg: 'fs://img/back.png',
  23.             customButtons:[],
  24.         },
  25.         foot: {
  26.             bg: 'rgba(0.5,0.5,0.5,0.7)',
  27.             height: 44,
  28.             playSize: 44,
  29.             playImg: 'fs://img/paly.png',
  30.             pauseImg: 'fs://img/pause.png',
  31.             timeSize: 14,
  32.             timeColor: '#fff',
  33.             sliderImg: 'fs://img/slder.png',
  34.             progressColor: '#696969',
  35.             progressSelected: '#76EE00',
  36.             verticalImg:'',
  37.             horizontalImg:'',
  38.             lockImg:'',
  39.             unlockImg:'',
  40.         }
  41.     },
  42.     path: 'http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4', //（可选项）字符串类型；文档的路径，支持网络和本地（fs://）路径；默认：未传值时不播放
  43.     //在 android 平台上不支持 widget://
  44.     autoPlay: true //（可选项）布尔类型；打开时是否自动播放；默认：true（自动播放）
  45. }, function(ret, err) {
  46.     if (ret) {
  47.         alert(JSON.stringify(ret));
  48.             } else {
  49.         alert(JSON.stringify(err));
  50.     }
  51. });

可用性

iOS 系统，Android 系统

可提供的 1.0.0 及更高版本

onBack

该方法需要在监听到物理按键时调用（只对 openPlay 接口打开的播放器有效，暂仅支持 android）

onBack()

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.onBack();

可用性

Android 系统

可提供的 1.0.0 及更高版本

isFullscreen

判断当前窗口是否全屏（只对 openPlay 接口打开的播放器有效）

isFullscreen(callback(ret))

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     isFullscreen:true // 布尔类型，是否全屏
  3. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.isFullscreen(function(ret){
  3.     alert(JSON.stringify(ret));
  4. });

可用性

Android，iOS系统

可提供的 1.0.0 及更高版本

onPause

该方法需要在 pause 事件中调用（只对 openPlay 接口打开的播放器有效，仅支持android）

onPause()

示例代码

  1. api.addEventListener({
  2.     name:'pause'
  3. }, function(ret){
  4.     var videoPlayer = api.require('videoPlayer');
  5.     videoPlayer.onPause();
  6. });

可用性

Android 系统

可提供的 1.0.0 及更高版本

onResume

该方法需要在resume事件中调用（只对 openPlay 接口打开的播放器有效，仅支持android）

onResume()

示例代码

  1. api.addEventListener({
  2.     name:'resume'
  3. }, function(ret){
  4.     var videoPlayer = api.require('videoPlayer');
  5.     videoPlayer.onResume();
  6. });

可用性

Android 系统

可提供的 1.0.0 及更高版本

customBtnIsSelected

判断自定义按钮是否被选中 注意:只对openPlay接口打开的播放器有效

customBtnIsSelected(params，callback(ret))

params

index:

  • 类型：数字
  • 描述：（可选项）用户自定义按钮的点击index，从右到左排列
  • 默认值：1

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     isSelected:true // 布尔类型，是否选中
  3. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.customBtnIsSelected({
  3. index:1,
  4. },function(ret){
  5.     alert(JSON.stringify(ret));
  6. });

可用性

iOS，Android 系统

可提供的 1.0.0 及更高版本

setCustomBtnSelected

设置自定义按钮被选中 注意:只对openPlay接口打开的播放器有效

setCustomBtnSelected(params)

params

index:

  • 类型：数字
  • 描述：（可选项）用户自定义按钮的点击index，从右到左排列
  • 默认值：1

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setCustomBtnSelected({
  3. index:1
  4. });

可用性

iOS，Android 系统

可提供的 1.0.0 及更高版本

setCustomBtnCancelSelected

设置自定义按钮被取消 只对openPlay接口打开的播放器有效

setCustomBtnCancelSelected(params)

params

index:

  • 类型：数字
  • 描述：（可选项）用户自定义按钮的点击index，从右到左排列
  • 默认值：1

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setCustomBtnCancelSelected({
  3. index:1
  4. });

可用性

iOS，Android 系统

可提供的 1.0.0 及更高版本

setCustomBtnVisible

设置自定义按钮是否隐藏 只对 openPlay 接口打开的播放器有效

setCustomBtnVisible(params)

params

index:

  • 类型：数字
  • 描述：（可选项）用户自定义按钮的点击index，从右到左排列
  • 默认值：1

visible:

  • 类型：布尔
  • 描述：是否显示
  • 默认：false

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.setCustomBtnVisible({
  3.     index:1,
  4.     visible:false
  5. });

可用性

iOS，Android 系统

可提供的 1.0.0 及更高版本

videoCapture

获取指定视频的制定时刻的截图

videoCapture(params)

params

videoUrl:

  • 类型：字符串
  • 描述：视频地址，支持本地(widget://和fs:// android仅支持fs://)和网络视频

time:

  • 类型：数字类型
  • 描述：指定位置(单位为秒)

isAblum:

  • 类型：布尔类型
  • 描述：（可选项）是否保存相册
  • 默认：false

name:

  • 类型：布尔类型
  • 描述：（必选项）图片名

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.       status: true,    // 布尔类型； 是否转换成功，true|false 
  3.       path: ''         // 字符串类型；转换的图片在本地保存的路径（绝对路径）
  4. }

示例代码

  1. var videoPlayer = api.require('videoPlayer');
  2. videoPlayer.videoCapture({
  3.   videoUrl:'',
  4.   time:10,
  5.   isAblum:false,
  6.   name:'moive'
  7. }, function(ret){
  8.     alert(JSON.stringify(ret));
  9. });

可用性

iOS，Android 系统

可提供的 1.0.0 及更高版本

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。