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

Karuru 发布于2019-08-05 17:13 / 1944人阅读

摘要：本文出自官方论坛封装了百度云播放器。百度云播放器突破平台对视频格式的限制，支持目前所有主流的媒体格式等。使用前先去百度开放平台获取，配置到文件中，否则会出现闪退等异常。

本文出自APICloud官方论坛

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

模块亮点介绍：

自带UI，用户只需自己设计图标，调整参数。

具有双击播放、暂停，手势滑动改变播放进度、屏幕亮度和音量的功能

iOS 支持横竖屏自动切换（设置中打开竖屏锁定）

顶部、底部按钮播放时自动隐藏，点击唤起。

使用前先去百度开放平台获取AccessKey，配置到config.xml文件中，否则会出现闪退等异常。参考模块文档说明。

直接调用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。

超融合服务器混合云 ios开发视频播放 android开发视频播放华为云服务器开发教程视频播放 flash播放器demo

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59471.html

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

摘要：本文出自官方论坛封装了百度云播放器。百度云播放器突破平台对视频格式的限制，支持目前所有主流的媒体格式等。使用前先去百度开放平台获取，配置到文件中，否则会出现闪退等异常。本文出自APICloud官方论坛 UIBPlayer 封装了百度云播放器 SDK。本模块带有UI方案，打开后为一个具有完整功能的播放器界面。百度云播放器突破 Android、iOS 平台对视频格式的限制，支持目前所有主...

Heier 2019-07-01 13:57 评论0 收藏0
2017 我所分享的技术文章总结（下）

摘要：对下半年所分享的文章进行整理，上半年总结的篇好文请点击这里，很多读者当时忘记了收藏，以致于查找一篇历史文章很费劲，因此在这里顺便做下记录。目前就分下下面几个大类，没有更多细分，已基本可以查找了。对下半年所分享的文章进行整理，上半年总结的 98 篇好文请点击这里，很多读者当时忘记了收藏，以致于查找一篇历史文章很费劲，因此在这里顺便做下记录。目前就分下下面几个大类，没有更多细分，已基本可...

XBaron 2019-06-25 11:52 评论0 收藏0
企业级Android音视频开发学习路线+项目实战+源码解析(WebRTC Native 源码、X26

摘要：因此，对音视频人才的需求也从小众变成了大众，这更多的是大家对未来市场的预期导致的结果。做个勤奋向上的人，加紧学习，抓住中心，宁精勿杂，宁专勿多。前言如今音视频的...

tomato 2021-11-24 09:38 评论0 收藏0
JS进阶篇--ckplayer.js视频播放插件

摘要：，是否自动播放，可以为或，默认为，参数不为时播放器加载完成后均为暂停状态。，视频开始前广告播放的秒数，只针对或图片有效，默认为。，视频结束后的动作，停止播放并发送，是不发送且重新循环播放，停止播放，默认为。网页中常见的功能就是播放视频，下面介绍的这个ckplayer.js既可以在pc端播放，也可以在手机网页上播放。可调用flash也可以调用html5播放器： var ...

tangr206 2019-08-21 10:38 评论0 收藏0
3月份前端资源分享

摘要：面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为，有哪些一般人我都告诉他，但是他都不听的忠告如何面试前端工程师更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...

nanchen2251 2019-08-21 15:21 评论0 收藏0