UIBPlayer （视频播放）demo分享

技术咨询-F

UIBPlayer 封装了百度云播放器 SDK。本模块带有UI方案，打开后为一个具有完整功能的播放器界面。百度云播放器突破 Android、iOS 平台对视频格式的限制，支持目前所有主流的媒体格式(mp4、avi、wmv、flv、mkv、mov、 rmvb 等)。

模块文档地址


模块亮点介绍：
1. 自带UI，用户只需自己设计图标，调整参数。
2.  具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能
3. iOS 支持横竖屏自动切换（设置中打开竖屏锁定）4. 顶部、底部按钮播放时自动隐藏，点击唤起。

1.  使用前先去百度开放平台获取AccessKey，配置到config.xml文件中，否则会出现闪退等异常。参考模块文档说明。
2.  直接调用open接口即可打开播放器。代码如下：

1. var UIBPlayer = api.require('UIBPlayer');
   
2.         UIBPlayer.open({
   
3.             rect: {
   
4.                 x: 0,
   
5.                 y: 0,
   
6.                 w: api.winWidth,
   
7.                 h: 300
   
8.             },
   
9.             videoScalingMode:"FIT_WITH_CROPPING",
   
10.             path: 'http://wvideo**.**/video/2016/0328/56f8ec01d9bfe_wpd.mp4',
    
11.             autoPlay: false,
    
12.             enableLooping: true,
    
13.             pauseInBackground: true,
    
14.             coverImg: 'widget://image/uibplayer/cover.png',
    
15.             styles: {
    
16.                 head: {
    
17.                     bg: 'rgba(161,161,161,0.5)',
    
18.                     height: 44,
    
19.                     marginTop: api.safeArea.top,
    
20.                     hide: false,
    
21.                     backBtn: {
    
22.                         size: 30,
    
23.                         backImg: 'widget://image/uibplayer/back.png',
    
24.                         marginLeft: 5
    
25.                     },
    
26.                     titleLabel: {
    
27.                         title: '蝙蝠侠',
    
28.                         size: 20,
    
29.                         color: '#fff',
    
30.                         width: 200,
    
31.                         numberLines: 1,
    
32.                         leftMargin: 5,
    
33.                         backgroundColor: 'rgba(0,0,0,0)'
    
34.                     },
    
35.                     customButtons: [{
    
36.                         w: 30,
    
37.                         h: 30,
    
38.                         rightMagin: 5,
    
39.                         img: 'widget://image/uibplayer/setting.png',
    
40.                         imgSelected: 'widget://image/uibplayer/settinged.png',
    
41.                     }, {
    
42.                         w: 30,
    
43.                         h: 30,
    
44.                         rightMagin: 5,
    
45.                         img: 'widget://image/uibplayer/mess.png',
    
46.                         imgSelected: 'widget://image/uibplayer/messed.png',
    
47.                     }]
    
48.                 },
    
49.                 foot: {
    
50.                     bg: 'rgba(161,161,161,0.5)',
    
51.                     height: 44,
    
52.                     marginBottom: 0,
    
53.                     hide: false,
    
54.                     playBtn: {
    
55.                         size: 44,
    
56.                         playImg: 'widget://image/uibplayer/play.png',
    
57.                         pauseImg: 'widget://image/uibplayer/pause.png',
    
58.                         marginLeft: 0
    
59.                     },
    
60.                     currentTimeLabel: {
    
61.                         textSize: 14,
    
62.                         textColor: "#FFF",
    
63.                         marginLeft: 5
    
64.                     },
    
65.                     seekBar: {
    
66.                         sliderImg: 'widget://image/uibplayer/slide.png',
    
67.                         progressColor: '#696969',
    
68.                         progressSelectedColor: '#333333',
    
69.                         marginLeft: 5,
    
70.                         marginRight: 5
    
71.                     },
    
72.                     totalTimeLabel: {
    
73.                         textSize: 14,
    
74.                         textColor: "#FFF",
    
75.                         marginRight: 5
    
76.                     },
    
77.                     fullScreenBtn: {
    
78.                         size: 30,
    
79.                         img: 'widget://image/uibplayer/unfullscreen.png',
    
80.                         fullScreenImg: 'widget://image/uibplayer/fullscreen.png',
    
81.                         marginRight: 10
    
82.                     }
    
83.                 }
    
84.             },
    
85.             fixedOn: api.frameName,
    
86.             fixed: false
    
87.         });

复制代码

模块截图：


附件为用到的图标素材。
没有放源码包。因为不同用户需要到百度开放平台申请key, 配置到自己项目的config.xml中，提交代码然后编译自定义loader。

飞翔的翔

支持一下

以德服人、

支持下，最近在做更新视频app

Mr.ZhouHeng

这样子啊