開發者進階之路 |UIBPlayer （視頻播放）demo分享

本文出自APICloud官方論壇

UIBPlayer 封裝了百度雲播放器 SDK。本模塊帶有UI方案，打開後爲一個具備完整功能的播放器界面。百度雲播放器突破 Android、iOS 平臺對視頻格式的限制，支持目前全部主流的媒體格式(mp四、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: 'wvideo.spriteapp.cn/video/2016/…',

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。