Import from Github repo
// importing into an ES6 class
import { UIButtonPlayPause } from 'ad-video'
This is a display object class, extending [UIButton](UIButton) with direct control to a [VideoPlayer](#VideoPlayer) instance. It controls the playing and pausing for the [VideoPlayer](#VideoPlayer).
While it can be instantiated by itself, it is typically created from the VideoControls class which is called from the constructor of a [VideoPlayer](#VideoPlayer) instance.
See [UIButton](UIButton) for more info.<br><br>
<b>Sample 1</b><br>
Add the button to the controlBar<br>
<pre class="sunlight-highlight-javascript">
var myVideoPlayer = new VideoPlayer({
source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
target: View.main,
id: 'my-video-player',
css: {
width: 400,
height: 250
},
controls : {
onControlBar : {
buttonPlayPause : {
css : {
backgroundColor : 'rgb(100,200,10)'
},
state : [ 'btnPlay', 'btnPause' ]
}
}
}
});
<b>Sample 2</b><br>
Add the button on the screen, NOT on the controlBar<br>
<pre class="sunlight-highlight-javascript">
var myVideoPlayer = new VideoPlayer({
source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
target: View.main,
id: 'my-video-player',
css: {
width: 400,
height: 250
},
controls : {
onScreen : {
buttonPlayPause : {
css : {
width : 70,
height : 70,
backgroundColor : 'rgba(20,200,10,.5)'
},
state : [ 'btnPlay', 'btnPause' ]
},
},
}
});
<b>Sample 3</b><br>
Use DOM elements as the states of the button, to have more contorl over their css
<pre class="sunlight-highlight-javascript">
var myVideoPlayer = new VideoPlayer({
source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
target: View.main,
id: 'my-video-player',
css: {
width: 400,
height: 250
},
controls : {
onScreen : {
buttonPlayPause : {
css : {
width : 70,
height : 70,
backgroundColor : 'rgba(20,200,10,.5)'
},
state : [
new UIImage({
source : 'btnPlay',
css : {
x : 10,
y : 10,
width : 50,
height : 50,
backgroundColor : 'rgba(100,100,0,.5)'
}
}),
new UIImage({
source : 'btnPause',
css : {
x : 10,
y : 10,
width : 50,
height : 50,
backgroundColor : 'rgba(0,100,100,.5)'
}
})
]
},
}
}
});