moviePlayer

来自于:APICloud立即使用

概述

moviePlayer 封装了视频播放功能(不支持音频播放)。可快进、快退设置播放位置等操作,亦可通过手势设置屏幕亮度和系统声音大小。通过监听接口可获取模块上的各种手势操作事件。使用本模块时可把本模块当做一个 frame 添加在 window 或 frame 上。Android 平台上支持的的视频文件格式有:MP4、3gp;iOS 平台上支持的视频文件格式有:MOV,MP4,M4V。本模块通过 open 接口,打开一个纯播放器界面,再配合 frame 自定义完整的播放页面。

open

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

注意:视频在竖屏时不显示标题,在横屏时显示

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

params

rect:

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

texts:

  • 类型:JSON 对象
  • 描述:(可选项)聊天输入框模块可配置的文本
  • 内部字段:
{
     title: '足球'    //(可选项)字符串类型;顶部标题文字
}

styles:

  • 类型:JSON 对象
  • 描述:(可选项)模块的样式设置
  • 内部字段:
{
    head:{//(可选项)JSON对象;播放器顶部导航条样式    
       bg: 'rgba(161,161,161,0.5)', //(可选项)字符串类型;顶部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
       height: 44,                  //(可选项)数字类型;顶部导航条的高;默认:44
       y:20,                        // (可选项)数字类型;距离模块顶部的距离;默认:20
       title:{
       size:20,                     //(可选项)数字类型;顶部标题字体大小;默认:20
       color:'#fff',                //(可选项)字符串类型;顶部标题字体颜色;默认:#fff
       width:40,                    //(可选项)标题的宽度,文本超过该宽度,显示...
       leftMargin:10                //(可选项)距离左边控件的外边距,默认:10
       },
       backSize: 44,                //(可选项)数字类型;顶部返回按钮大小;默认:44
       backImg:'fs://img/back.png', //(可选项)字符串类型;顶部返回按钮的背景图片,要求本地路径(widget://、fs://);默认:返回小箭头图标
       customButtons:[

       {
          w:30,                            //(可选项)数字类型;顶部右边设置按钮大小;默认:30(仅支持iOS)
          h:30,                            //(可选项)数字类型;顶部右边设置按钮大小;默认:30(仅支持iOS)
          rightMagin:10,                   // (可选项)数字类型;右边距;默认:10
          img:'fs://img/img1.png',         //(可选项)字符串类型;顶部右边设置自定义按钮(未选中状态),要求本地路径(widget://、fs://);
          imgSelected:'fs://img/img2.png', //(可选项)字符串类型;顶部右边设置自定义按钮(选中状态),要求本地路径(widget://、fs://);
       },{
          w:30,                            //(可选项)数字类型;顶部右边设置按钮大小;默认:30 (仅支持iOS)
          h:30,                            //(可选项)数字类型;顶部右边设置按钮大小;默认:30 (仅支持iOS)
          rightMargin:10,                  // (可选项)数字类型;右边距;默认:10
          img:'fs://img/img3.png',         //(可选项)字符串类型;顶部右边设置自定义按钮(未选中状态),要求本地路径(widget://、fs://);
          imgSelected:'fs://img/img4.png', //(可选项)字符串类型;顶部右边设置自定义按钮(选中状态),要求本地路径(widget://、fs://);
       }]
    },  
    foot:{                                  //(可选项)JSON对象;播放器底部导航条样式    
       bg: 'rgba(161,161,161,0.5)',         //(可选项)字符串类型;底部导航条背景,支持#、rgb、rgba、img;默认:rgba(161,161,161,0.5)
       height: 44,                          //(可选项)数字类型;底部导航条的高;默认:44
             palyBtn:{
                 size : 44,                    //(可选项)数字类型;底部播放/暂停按钮大小;默认:44
                 playImg:'fs://img/play.png',  //(可选项)字符串类型;底部播放按钮的背景图片,要求本地路径(widget://、fs://);默认:播放按钮图标
                 pauseImg:'fs://img/pause.png',//(可选项)字符串类型;底部暂停按钮的背景图片,要求本地路径(widget://、fs://);默认:暂停按钮图标 
                 marginLeft:5                  // (可选项) 
数字类型;左边距,默认:5              
             },
             currentTimeLabel:{
                 textSize:14,                  //(可选项)数字类型;底部时间标签大小;默认:14
                 textColor:"#FFF",             //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#FFF
                 textWidth: 30,                //(可选项) 数字类型;时间标签的宽度
                 marginLeft:5                  // (可选项) 
数字类型;左边距,默认:5 

             },                
             seekBar:{
              sliderImg:'fs://img/slder.png', //(可选项)字符串类型;底部进度条滑块背景图片,要求本地路径(widget://、fs://);默认:滑块小图标
              sliderW : 20,      // 数字类型; slider 的宽度
              sliderH : 20,      // 数字类型; slider 的高度
              progressColor: '#696969',          //(可选项)字符串类型;进度条背景色,支持#、rgba、rgb;默认:#696969
              progressSelected: '#76EE00',       //(可选项)字符串类型;滑动后的进度条背景色,支持#、rgb、rgba;默认:#76EE00
                  marginLeft:5       // (可选项) 数字类型;左边距,默认:5 
                  marginRight:5      // (可选项)数字类型;右边距,默认:5 
             },
             totalTimeLabel:{
                 textSize:14,                     //(可选项)数字类型;底部时间标签大小;默认:14
                 textColor:"#FFF",                //(可选项)字符串类型;底部时间标签颜色,支持#、rgba、rgb;默认:#FFF
                 textWidth: 30,                   //(可选项) 数字类型;时间标签的宽度
                 marginRight:5                    // (可选项) 
数字类型;右边距,默认:5
             },
             fullscreenBtn:{
                size:30 //(可选项)数字类型;底部全屏/非全屏按钮大小;默认:44
                 verticalImg:'fs://img/vertical.png',       //(可选项)字符串类型;底部横竖屏切换按钮的背景图片,竖屏状态下的切换按钮,要求本地路径(widget://、fs://);默认:竖屏按钮图标
                 horizontalImg:'fs://img/horizontal.png',     //(可选项)字符串类型;底部横竖屏切换按钮的背景图片,横屏状态下的切换按钮,要求本地路径(widget://、fs://);默认:横屏按钮图标
             }
    }
}

path:

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

autoPlay:

  • 类型:布尔
  • 描述:(可选项)打开时是否自动播放
  • 默认值:true(自动播放)

coverImg:

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

autorotation:

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

fixedOn:

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

fixed:

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

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status:           // 布尔类型;是否打开播放组件并显示,true|false;Will be deprecated in ther future
}

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.open({
          rect:{
          x: 0,
          y: 0,
          w:api.frameWidth,
          h:300
          },
          styles:{
          head:{
          bg: 'rgba(161,161,161,0.5)',
          height: 44,
          y:20,
          title:{
          size:20,
          color:'#fff',
          width:40,
          leftMargin:10
          },
          backSize: 30,
          backImg:'widget://image/back.png',
          customButtons:[{
          w:30,
          h:30,
          rightMagin:10,
          img:'widget://image/image/collect.png',
          imgSelected:'fs://image/collectSelected.png',
          }]},
          foot:{  
          bg: 'rgba(0,0,0,0.5)',
          height: 44,
          palyBtn:{
          size: 20,
          playImg:'widget://image/play.png',
          pauseImg:'widget://image/pause.png',
          marginLeft:5
          },
          currentTimeLabel:{
          textSize:14,
          textColor:"#FFF",
          textWidth: 43,
          marginLeft:5
          },
          seekBar:{
          sliderImg:'widget://image/circle.png',
          sliderW : 20,
          sliderH : 20,
          progressColor: '#696969',
          progressSelected: '#76EE00',
          marginLeft:10,
          marginRight:10
          },
          totalTimeLabel:{
          textSize:14,
          textColor:"#FFF",
          textWidth: 43,
          marginRight:5
          },
          fullscreenBtn:{
          size:20,
          verticalImg:'widget://image/vertical.png',
          horizontalImg:'widget://image/horizontal.png',
          }
          } },
           path:'http://baobab.wdjcdn.com/1455782903700jy.mp4',
           autoPlay: true
            },function(ret, err){
                if(ret){
                    // alert(JSON.stringify(ret));
                // } else {
                    // alert(JSON.stringify(err));
                }

});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示视频播放视图

show()

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏视频播放视图

hide()

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭播放器

close()

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

replay

重新播放指定播放地址

replay()

params

title:

  • 类型:字符串
  • 描述:(可选项)字符串类型;顶部标题文字

path:

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

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.replay({
    title:'篮球',
    path : 'http://xxx/xx.mp4'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

isFullscreen

判断当前是否为全屏

isFullscreen()

callback(ret)

{
    state: true  // boolean类型,true表示全屏状态 否则为非全屏状态
}

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.isFullscreen(function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

isPlaying

判断当前播放状态

isPlaying(ret)

callback(ret)

{
    state: true  // boolean类型,true表示正在播放,否则为暂停状态
}

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.isPlaying(function(ret){
    alert(JSON.stringify(ret));
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addEventListener

播放器监听事件

addEventListener(ret)

callback

ret:

{
    eventType: 'play', // 字符串类型;点击播放按钮;取值范围:
                       // pause 点击暂停播放按钮
                       // complete 播放器播放完成
                       // error 播放器异常
                       // back 返回按钮
                       // leftFling 在播放器上任意位置快速左滑
                       // rightFling 在播放器上任意位置快速右滑
                       // upFling 在播放器上任意位置快速上滑
                       // downFling 在播放器上任意位置快速下滑
                       // customBtns 点击自定义按钮(结合index参数使用)
    index:0           // 数字类型,自定义按钮的 index(仅在eventType == customBtns时有效)
}

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.addEventListener(function(ret){
    if(ret && ret.eventType == 'back'){
        alert('点击back按钮');
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

onBack

该方法需要在点击back按键是调用(仅支持Android)

onBack()

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.onBack();
});

可用性

Android系统

可提供的1.0.0及更高版本