moviePlayer

show close play isFullscreen addEventListener setShowOrHideControlView onResume getDuration videoCapture

论坛示例

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

概述

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

open

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

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

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

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：

texts：

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

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 (当statusBarAppearance 设置为false 时,head里面的y参数设置只对竖屏有效, 当statusBarAppearance= true时,head里面的y参数设置对横竖屏有效)
  6.        title:{
  7.        size:20,                     //（可选项）数字类型；顶部标题字体大小；默认：20
  8.        color:'#fff',                //（可选项）字符串类型；顶部标题字体颜色；默认：#fff
  9.        width:40,                    //(可选项)标题的宽度，文本超过该宽度，显示...
  10.        leftMargin:10                //（可选项）距离左边控件的外边距，默认：10
  11.        },
  12.        backSize: 44,                //（可选项）数字类型；顶部返回按钮大小；默认：44
  13.        backImg:'fs://img/back.png', //（可选项）字符串类型；顶部返回按钮的背景图片，要求本地路径（widget://、fs://）；默认：返回小箭头图标
  14.        customButtons:[
  15.        {
  16.           w:30,                            //（可选项）数字类型；顶部右边设置按钮大小；默认：30(仅支持iOS)
  17.           h:30,                            //（可选项）数字类型；顶部右边设置按钮大小；默认：30(仅支持iOS)
  18.           rightMargin:10,                   // (可选项）数字类型；右边距；默认：10
  19.           img:'fs://img/img1.png',         //（可选项）字符串类型；顶部右边设置自定义按钮(未选中状态)，要求本地路径（widget://、fs://）；
  20.           imgSelected:'fs://img/img2.png', //（可选项）字符串类型；顶部右边设置自定义按钮(选中状态)，要求本地路径（widget://、fs://）；
  21.        },{
  22.           w:30,                            //（可选项）数字类型；顶部右边设置按钮大小；默认：30 (仅支持iOS)
  23.           h:30,                            //（可选项）数字类型；顶部右边设置按钮大小；默认：30 (仅支持iOS)
  24.           rightMargin:10,                  // (可选项）数字类型；右边距；默认：10
  25.           img:'fs://img/img3.png',         //（可选项）字符串类型；顶部右边设置自定义按钮(未选中状态)，要求本地路径（widget://、fs://）；
  26.           imgSelected:'fs://img/img4.png', //（可选项）字符串类型；顶部右边设置自定义按钮(选中状态)，要求本地路径（widget://、fs://）；
  27.        }]
  28.     },  
  29.     foot:{                                  //（可选项）JSON对象；播放器底部导航条样式    
  30.        bg: 'rgba(161,161,161,0.5)',         //（可选项）字符串类型；底部导航条背景，支持#、rgb、rgba、img；默认：rgba(161,161,161,0.5)
  31.        height: 44,                          //（可选项）数字类型；底部导航条的高；默认：44
  32.              palyBtn:{
  33.                  size : 44,                    //（可选项）数字类型；底部播放/暂停按钮大小；默认：44
  34.                  playImg:'fs://img/play.png',  //（可选项）字符串类型；底部播放按钮的背景图片，要求本地路径（widget://、fs://）；默认：播放按钮图标
  35.                  pauseImg:'fs://img/pause.png',//（可选项）字符串类型；底部暂停按钮的背景图片，要求本地路径（widget://、fs://）；默认：暂停按钮图标 
  36.                  marginLeft:5                  // (可选项) 
  37. 数字类型；左边距，默认：5              
  38.              },
  39.              currentTimeLabel:{
  40.                  textSize:14,                  //（可选项）数字类型；底部时间标签大小；默认：14
  41.                  textWidth: 30,                //（可选项） 数字类型；时间标签的宽度
  42.                  marginLeft:5                  // (可选项) 数字类型；左边距，默认：5 
  43.              },                
  44.              seekBar:{
  45.               sliderImg:'fs://img/slder.png', //（可选项）字符串类型；底部进度条滑块背景图片，要求本地路径（widget://、fs://）；默认：滑块小图标
  46.               sliderW : 20,      // 数字类型; slider 的宽度
  47.               sliderH : 20,      // 数字类型; slider 的高度
  48.               progressColor: '#696969',          //（可选项）字符串类型；进度条背景色，支持#、rgba、rgb；默认：#696969
  49.               progressSelected: '#76EE00',       //（可选项）字符串类型；滑动后的进度条背景色，支持#、rgb、rgba；默认：#76EE00
  50.                   marginLeft:5       // (可选项) 数字类型；左边距，默认：5 
  51.                   marginRight:5      // (可选项)数字类型；右边距，默认：5 
  52.              },
  53.              totalTimeLabel:{
  54.                  textSize:14,                     //（可选项）数字类型；底部时间标签大小；默认：14
  55.                  textColor:"#FFF",                //（可选项）字符串类型；底部时间标签颜色，支持#、rgba、rgb；默认：#FFF
  56.                  textWidth: 30,                   //（可选项） 数字类型；时间标签的宽度
  57.                  marginRight:5                    // (可选项) 
  58. 数字类型；右边距，默认：5
  59.              },
  60.              fullscreenBtn:{
  61.                 size:30 //（可选项）数字类型；底部全屏/非全屏按钮大小；默认：44
  62.                  verticalImg:'fs://img/vertical.png',       //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，竖屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：竖屏按钮图标
  63.                  horizontalImg:'fs://img/horizontal.png',     //（可选项）字符串类型；底部横竖屏切换按钮的背景图片，横屏状态下的切换按钮，要求本地路径（widget://、fs://）；默认：横屏按钮图标
  64.              }
  65.     }
  66. }

path：

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

showBack：

  • 类型：布尔
  • 描述：（可选项）竖屏时是否显示返回按钮 同时支持竖屏是否显示顶部导航条
  • 默认值：true（显示）

isShowControlView：

  • 类型：布尔
  • 描述：（可选项）是否显示工具条
  • 默认值：true（显示）

autoPlay：

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

coverImg：

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

scalingMode：

  • 类型：字符串
  • 描述：（可选项）视频播放时的拉伸方式 仅支持iOS
  • 默认：aspect
  • 取值范围：
    • aspect 按原视频比例显示，是竖屏的就显示出竖屏的，两边留黑；
    • aspectFill 原比例拉伸视频，填充层边界
    • resize 不按照比例拉伸，填充层边界

autorotation:

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

useGestureControl:

  • 类型：布尔
  • 描述：（可选项）视频播放页面是否使用手势控制 (亮度，声音，快进快退) 注意:iOS如果此参数为false,则不能拖动进度条， 因为快进快退手势控制了进度条，在frame group中该参数为false，避免滑动事件冲突
  • 默认值：true

seekBarDragable:

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

videoDirection：

  • 类型：字符串
  • 描述：（可选项）视频方向 ，前端开发者若要使用竖屏视频竖屏全屏播放，可传入portrait实现需求，类似抖音
  • 默认：landscape
  • 取值范围：
    • portrait 竖屏视频；
    • landscape 横屏视频

isShowStatusBar：

  • 类型：布尔
  • 描述：（可选项）footer和header在视频打开时是否显示
  • 默认：true

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. }

示例代码

  1. var moviePlayer = api.require('moviePlayer');
  3.           rect:{
  4.           x: 0,
  5.           y: 0,
  6.           w:api.frameWidth,
  7.           h:300
  8.           },
  9.           styles:{
  10.           head:{
  11.           bg: 'rgba(161,161,161,0.5)',
  12.           height: 44,
  13.           y:20,
  14.           title:{
  15.           size:20,
  16.           color:'#fff',
  17.           width:40,
  18.           leftMargin:10
  19.           },
  20.           backSize: 30,
  21.           backImg:'widget://image/back.png',
  22.           customButtons:[{
  23.           w:30,
  24.           h:30,
  25.           rightMagin:10,
  26.           img:'widget://image/image/collect.png',
  27.           imgSelected:'fs://image/collectSelected.png',
  28.           }]},
  29.           foot:{  
  30.           bg: 'rgba(0,0,0,0.5)',
  31.           height: 44,
  32.           palyBtn:{
  33.           size: 20,
  34.           playImg:'widget://image/play.png',
  35.           pauseImg:'widget://image/pause.png',
  36.           marginLeft:5
  37.           },
  38.           currentTimeLabel:{
  39.           textSize:14,
  40.           textColor:"#FFF",
  41.           textWidth: 43,
  42.           marginLeft:5
  43.           },
  44.           seekBar:{
  45.           sliderImg:'widget://image/circle.png',
  46.           sliderW : 20,
  47.           sliderH : 20,
  48.           progressColor: '#696969',
  49.           progressSelected: '#76EE00',
  50.           marginLeft:10,
  51.           marginRight:10
  52.           },
  53.           totalTimeLabel:{
  54.           textColor:"#FFF",
  55.           textWidth: 43,
  56.           marginRight:5
  57.           },
  58.           fullscreenBtn:{
  59.           size:20,
  60.           verticalImg:'widget://image/vertical.png',
  61.           horizontalImg:'widget://image/horizontal.png',
  62.           }
  63.           } },
  64.            path:'http://baobab.wdjcdn.com/1455782903700jy.mp4',
  65.            autoPlay: true
  66.             },function(ret, err){
  67.                 if(ret){
  68.                     // alert(JSON.stringify(ret));
  69.                 // } else {
  70.                     // alert(JSON.stringify(err));
  71.                 }
  73. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示视频播放视图

show()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏视频播放视图

hide()

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭播放器

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

pause

暂停播放器

pause()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

play

播放

play()

示例代码

  1. var moviePlayer = api.require('moviePlayer');
  2. moviePlayer.play();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

replay

重新播放指定播放地址

replay()

params

title：

  • 类型：字符串
  • 描述：（可选项）字符串类型；顶部标题文字

path：

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

示例代码

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

iOS系统，Android系统

可提供的1.0.0及更高版本

isFullscreen

判断当前是否为全屏

isFullscreen()

callback(ret)

  1. {
  2.     status: true  // boolean类型，true表示全屏状态 否则为非全屏状态
  3. }

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

isPlaying

判断当前播放状态

isPlaying(ret)

callback(ret)

  1. {
  2.     state: true  // boolean类型，true表示正在播放，否则为暂停状态
  3. }

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

播放器监听事件

addEventListener(ret)

callback

ret:

  1. {
  2.     eventType: 'play', // 字符串类型；点击播放按钮；取值范围：
  3.                        // pause 点击暂停播放按钮
  4.                        // complete 播放器播放完成
  5.                       // prepared 播放器准备完毕
  6.                        // error 播放器异常
  7.                        // back 返回按钮
  8.                        // leftFling 在播放器上任意位置快速左滑
  9.                        // rightFling 在播放器上任意位置快速右滑
  10.                        // upFling 在播放器上任意位置快速上滑
  11.                        // downFling 在播放器上任意位置快速下滑
  12.                        // customBtns 点击自定义按钮（结合index参数使用）
  13.                        // clickGesture 点击播放器事件(单击手势)
  14.                // landscape  切换至横屏事件
  15.                // portrait   切换至竖屏事件
  16.     index：0           // 数字类型，自定义按钮的 index（仅在eventType == customBtns时有效）
  17. }

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

onBack

该方法需要在点击back按键是调用，back键监听事件需要前端处理

onBack()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setShowOrHideControlView

footer和header是否显示

setShowOrHideControlView()

params

  • 类型：布尔类型
  • 描述：（可选项)是否显示
  • 默认：true

示例代码

  1. var moviePlayer = api.require('moviePlayer');
  2. moviePlayer.setShowOrHideControlView({
  3. isShow:true
  4. });

可用性

iOS，Android系统

可提供的1.0.0及更高版本

onPause

该方法用于app退入后台后调用（通过监听pause事件，仅支持Android）

onPause()

示例代码

  1. var moviePlayer = api.require('moviePlayer');
  2. moviePlayer.onPause();

Android系统

可提供的1.0.0及更高版本

onResume

该方法用于从后台恢复时调用（通过监听resume事件，仅支持Android）

onResume()

示例代码

  1. var moviePlayer = api.require('moviePlayer');
  2. moviePlayer.onResume();

可用性

Android系统

可提供的1.0.0及更高版本

getCurrentPosition

获取当前播放位置该方法需要在视频准备结束后调用

getCurrentPosition()

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     position:1000 //当前播放位置
  3. }

示例代码

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

可用性

iOS，Android系统

可提供的1.0.0及更高版本

getDuration

获取播放总时长（仅支持Android）该方法需要在视频准备结束后调用

getDuration()

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     duration:1000 //当前总时长
  3. }

示例代码

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

可用性

iOS，Android系统

可提供的1.0.0及更高版本

seekTo

跳转到指定播放位置

seekTo()

params

position:

  • 类型：数字类型
  • 描述：需要跳转的指定位置
  • 单位：ms（毫秒）1秒=1000毫秒

isPlay:

  • 类型：布尔类型
  • 描述：跳转后继续播放还是暂停；默认：true 播放

示例代码

  1. var moviePlayer = api.require('moviePlayer');
  2. moviePlayer.seekTo({
  3.     position:10000,
  4.     isPlay:false
  5. });

可用性

iOS，Android系统

可提供的1.0.0及更高版本

videoCapture

视频截图

videoCapture(params)

params

time:

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

isAblum:

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

name:

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  1. var moivePlayer = api.require('moivePlayer');
  2. moivePlayer.videoCapture({
  3.   time:10,
  4.   isAblum:false,
  5.   name:'moive'
  6. }, function(ret){
  7. });

可用性

iOS，Android系统

可提供的1.0.0及更高版本

论坛示例

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