开发者进阶之路 |UIBPlayer （视频播放）demo分享

本文出自APICloud官方论坛

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

模块亮点介绍：

1. 自带UI，用户只需自己设计图标，调整参数。
2. 具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能
3. iOS 支持横竖屏自动切换（设置中打开竖屏锁定）
4. 顶部、底部按钮播放时自动隐藏，点击唤起。
5. 使用前先去百度开放平台获取AccessKey，配置到config.xml文件中，否则会出现闪退等异常。参考模块文档说明。
6. 直接调用open接口即可打开播放器。代码如下：

var UIBPlayer = api.require('UIBPlayer');

    UIBPlayer.open({
        rect: {
            x: 0,
            y: 0,
            w: api.winWidth,
            h: 300
        },
        videoScalingMode:"FIT_WITH_CROPPING",
        path: 'http://wvideo.spriteapp.cn/video/2016/0328/56f8ec01d9bfe_wpd.mp4',
        autoPlay: false,
        enableLooping: true,
        pauseInBackground: true,
        coverImg: 'widget://image/uibplayer/cover.png',
        styles: {
            head: {
                bg: 'rgba(161,161,161,0.5)',
                height: 44,
                marginTop: api.safeArea.top,
                hide: false,
                backBtn: {
                    size: 30,
                    backImg: 'widget://image/uibplayer/back.png',
                    marginLeft: 5
                },
                titleLabel: {
                    title: '蝙蝠侠',
                    size: 20,
                    color: '#fff',
                    width: 200,
                    numberLines: 1,
                    leftMargin: 5,
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                customButtons: [{
                    w: 30,
                    h: 30,
                    rightMagin: 5,
                    img: 'widget://image/uibplayer/setting.png',
                    imgSelected: 'widget://image/uibplayer/settinged.png',
                }, {
                    w: 30,
                    h: 30,
                    rightMagin: 5,
                    img: 'widget://image/uibplayer/mess.png',
                    imgSelected: 'widget://image/uibplayer/messed.png',
                }]
            },
            foot: {
                bg: 'rgba(161,161,161,0.5)',
                height: 44,
                marginBottom: 0,
                hide: false,
                playBtn: {
                    size: 44,
                    playImg: 'widget://image/uibplayer/play.png',
                    pauseImg: 'widget://image/uibplayer/pause.png',
                    marginLeft: 0
                },
                currentTimeLabel: {
                    textSize: 14,
                    textColor: "#FFF",
                    marginLeft: 5
                },
                seekBar: {
                    sliderImg: 'widget://image/uibplayer/slide.png',
                    progressColor: '#696969',
                    progressSelectedColor: '#333333',
                    marginLeft: 5,
                    marginRight: 5
                },
                totalTimeLabel: {
                    textSize: 14,
                    textColor: "#FFF",
                    marginRight: 5
                },
                fullScreenBtn: {
                    size: 30,
                    img: 'widget://image/uibplayer/unfullscreen.png',
                    fullScreenImg: 'widget://image/uibplayer/fullscreen.png',
                    marginRight: 10
                }
            }
        },
        fixedOn: api.frameName,
        fixed: false
    });

复制代码

不同用户需要到百度开放平台申请key, 配置到自己项目的config.xml中，提交代码然后编译自定义loader。