moviePlayer

论坛示例

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

概述

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

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: '足球'    //(可选项)字符串类型;顶部标题文字
}

centerPlayBtn:

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

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 (当statusBarAppearance 设置为false 时,head里面的y参数设置只对竖屏有效, 当statusBarAppearance= true时,head里面的y参数设置对横竖屏有效)
       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)
          rightMargin: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

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

tabLayoutUse:

  • 类型:布尔
  • 描述:(可选项)是否是在tabLayout中使用,如在tabLayout中使用全屏后不可在播放控件上添加任何其他控件,不推荐在tabLayout中使用(仅android支持)
  • 默认:true

landscapeFullscreen:

  • 类型:布尔类型
  • 描述:(可选项)横屏模式下是否设置全屏,如设true全屏恢复竖屏后会取消全屏,会影响到应用全屏模式以及沉浸式模式。(仅android支持)
  • 默认: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){
                    // api.alert({msg: JSON.stringify(ret)});
                // } else {
                    // api.alert({msg: 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及更高版本

pause

暂停播放器

pause()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

play

播放

play()

示例代码

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

可用性

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)

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

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.isFullscreen(function(ret){
    api.alert({msg: 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){
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

addEventListener

播放器监听事件

addEventListener(ret)

callback

ret:

{
    eventType: 'play', // 字符串类型;点击播放按钮、双击播放;取值范围:
                       // pause 点击暂停播放按钮、双击暂停
                       // complete 播放器播放完成
                      // prepared 播放器准备完毕
                       // error 播放器异常
                       // back 返回按钮
                       // leftFling 在播放器上任意位置快速左滑
                       // rightFling 在播放器上任意位置快速右滑
                       // upFling 在播放器上任意位置快速上滑
                       // downFling 在播放器上任意位置快速下滑
                       // customBtns 点击自定义按钮(结合index参数使用)
                       // clickGesture 点击播放器事件(单击手势)
               // landscape  切换至横屏事件
               // portrait   切换至竖屏事件
    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按键是调用,back键监听事件需要前端处理

onBack()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setShowOrHideControlView

footer和header是否显示

setShowOrHideControlView()

params

isShow:

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

示例代码

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

可用性

iOS,Android系统

可提供的1.0.0及更高版本

onPause

该方法用于app退入后台后调用(通过监听pause事件,仅支持Android)

onPause()

示例代码

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

可用性

Android系统

可提供的1.0.0及更高版本

onResume

该方法用于从后台恢复时调用(通过监听resume事件,仅支持Android)

onResume()

示例代码

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

可用性

Android系统

可提供的1.0.0及更高版本

getCurrentPosition

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

getCurrentPosition()

callback(ret, err)

ret:

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

示例代码

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

可用性

iOS,Android系统

可提供的1.0.0及更高版本

getDuration

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

getDuration()

callback(ret, err)

ret:

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

示例代码

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

可用性

iOS,Android系统

可提供的1.0.0及更高版本

seekTo

跳转到指定播放位置

seekTo()

params

position:

  • 类型:数字类型
  • 描述:需要跳转的指定位置
  • 单位:ms(毫秒)1秒=1000毫秒

isPlay:

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

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.seekTo({
    position:10000,
    isPlay:false
});

可用性

iOS,Android系统

可提供的1.0.0及更高版本

videoCapture

视频截图

videoCapture(params)

params

time:

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

isAblum:

  • 类型:布尔类型
  • 描述:(可选项)是否保存相册
  • 默认:false

name:

  • 类型:布尔类型
  • 描述:(必选项)图片名

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
      status: true,    // 布尔类型; 是否转换成功,true|false 
      path: ''         // 字符串类型;转换的图片在本地保存的路径(绝对路径)
}

示例代码

var moviePlayer = api.require('moviePlayer');
moviePlayer.videoCapture({
  time:10,
  isAblum:false,
  name:'moive'
}, function(ret){
    api.alert({msg: JSON.stringify(ret)});
});

可用性

iOS,Android系统

可提供的1.0.0及更高版本

setCustomButtons

设置CustomButton的隐藏与显示

setCustomButtons(params)

params

isShow:

  • 类型:布尔类型
  • 描述:是否显示
  • 默认:true

array:

  • 类型:数组类型
  • 描述:需要显示或隐藏的按钮编号的数组
[
     0,1
]

示例代码

    var name = api.require('moviePlayer');
    name.setCustomButtons({
        isShow:false,
        array:[0,1]
    }, function(ret) {
        if (ret) {
           api.alert({msg: JSON.stringify(ret)});
        }
    });

可用性

iOS

可提供的1.0.0及更高版本

setSeekBarDragable

设置进度条是否能拖动

setSeekBarDragable(params)

params

seekBarDragable:

  • 类型:布尔类型
  • 描述:进度条能否拖动
  • 默认:true

示例代码

    var name = api.require('moviePlayer');
    name.setSeekBarDragable({
        seekBarDragable:false
    }, function(ret) {
        if (ret) {
           api.alert({msg: JSON.stringify(ret)});
        }
    });

可用性

iOS、Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助? 请保持联络!
最后更新于 2024/07/31