The road to developer advancement | UIBPlayer (video playback) demo sharing

The road to developer advancement | UIBPlayer (video playback) demo sharing

This article is from the official APICloud forum

UIBPlayer encapsulates the Baidu Cloud Player SDK. This module has a UI scheme, and when opened, it becomes a player interface with complete functions. Baidu Cloud Player breaks through the limitations of Android and iOS platforms on video formats and supports all current mainstream media formats (mp4, avi, wmv, flv, mkv, mov, rmvb, etc.).

Module highlights:

  1. With its own UI, users only need to design their own icons and adjust parameters.

  2. With double-click to play, pause, gesture slide to change the playback progress, screen brightness and volume functions

  3. iOS supports automatic switching between horizontal and vertical screens (turn on the vertical screen lock in the settings)

  4. The top and bottom buttons are automatically hidden when playing, click to awaken them.

  5. Before use, go to the Baidu open platform to obtain the AccessKey and configure it in the config.xml file, otherwise an exception such as a crash will occur. Refer to the module documentation.

  6. The player can be opened by directly calling the open interface. code show as below:

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:'Batman',

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

});

Copy code

Different users need to apply for the key on the Baidu open platform, configure it in the config.xml of their project, submit the code and then compile the custom loader.