Skip to content

Latest commit

 

History

History
299 lines (286 loc) · 7.29 KB

VideoControls.md

File metadata and controls

299 lines (286 loc) · 7.29 KB
Raw

VideoControls

Kind: global class
Npmpackage:

new VideoControls()

This is a display object class, extending UIComponent. It is a DOM element that houses all the video control components: UIButton, UISlider and UITextField.

import { VideoControls } from 'ad-video'

This can be instantiated but is typically called internally from the VideoPlayer by passing in all params to the instantiation. All controls can be added to a UIControlBar or to the main container to be placed anywhere over the video. This is done through the instantiation, by passing components to a node onControlBar or onScreen. See example below.

Accepted Components:

  • buttonPlayPause, see [UIButtonPlayPause](#UIButtonPlayPause)
  • buttonReplay, see [UIButtonReplay](#UIButtonReplay)
  • buttonFullScreen, see [UIButtonFullScreen](#UIButtonFullScreen)
  • buttonMute, see [UIButtonMute](#UIButtonMute)
  • timeDisplay, see [UITimeDisplay](#UITimeDisplay)
  • sliderProgress, see [UISliderProgress](UISliderProgress)
  • sliderVolume, see [UISliderVolume](UISliderVolume)
Example adding a play/pause button to the screen:
View.main.videoPlayer = new VideoPlayer({
	source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
	target: View.main,
	id: 'My_Unique_ID',
	css: {
		width: 300,
		height: 250
	},
	controls : {
		onScreen : {
			buttonPlayPause : {
				css : {
					x : 130,
					y : 40,
					width : 80,
					height : 80,
					backgroundColor : 'rgba(10,200,10,.5)'
				},
				icon : [ 'btnPlay', 'btnPause' ]
			}
		}
	}
})
// access button
View.main.videoPlayer.controls.buttonPlayPause;


Example adding a play/pause button to the ControlBar:
View.main.videoPlayer = new VideoPlayer({
	source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
	target: View.main,
	id: 'My_Unique_ID',
	css: {
		width: 300,
		height: 250
	},
	controls : {
		onControlBar : {
			buttonPlayPause : {
				icon : [ 'btnPlay', 'btnPause' ]
			}
		}
	}
})
// access button
View.main.videoPlayer.controls.controlBar.buttonPlayPause;


Example All Controls on ControlBar:
// Full VideoPlayer with all options and controls
View.main.videoPlayer = new VideoPlayer({
	source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
	target: View.main,
	id: 'My_Unique_ID',
	css: {
		width: 300,
		height: 250
	},
	controls : {
		replayOnInteraction : false,
		unmuteOnInteraction : true,
		onControlBar : {
			controlBar : {
				constant : false,
				showOnPoster : false,
				css : {
					backgroundColor : 'rgba(250,100,20,.5)'
				}
			},
			buttonPlayPause : {
				icon : [ 'btnPlay', 'btnPause' ]
			},
			buttonReplay : {
				icon : [ 'btnReplay' ]
			},
			buttonMute : {
				icon : [ 'btnUnMute', 'btnMute' ]
			},
			buttonFullScreen : {
				icon : [ 'btnFullScreen' ]
			},
			sliderProgress : {
				inline : true,
				css : {
					width : 120
				},
				onOver : function(){
					console.log( this.track )
				},
				onOut : function(){
					console.log( this.handle )
				}
			},
			sliderVolume : {
				css : {
					width : 60
				},
				bg : {},
				track : {},
				handle : {}
			},
			timeDisplay : {
				css : {
					height : 'inherit',
					color : '#ffffff'
				},
				fontSize : 18,
				fontFamily : 'Arial',
				alignText : Align.CENTER,
				bufferText : {
					left : 5,
					right : 5
				},
				showDuration : true
			}
		}
	}
});


Example Controls on ControlBar AND on screen:
// Full VideoPlayer with all options and controls
View.main.videoPlayer = new VideoPlayer({
	source: adParams.videosPath + 'RED_Html5_Showcase_300x250.mp4',
	target: View.main,
	id: 'My_Unique_ID',
	css: {
		width: 300,
		height: 250
	},
	controls : {
		replayOnInteraction : false,
		unmuteOnInteraction : true,
		onScreen : {
			buttonPlayPause : {
				css : {
					x : 130,
					y : 40,
					backgroundColor : 'rgba(10,200,10,.5)'
				},
				icon : [ 'btnPlay', 'btnPause' ]
			},
			buttonReplay : {
				css : {
					x : 200,
					y : 50,
					width : 80,
					height : 80,
					backgroundColor : 'rgb(100,200,100)'
				},
				icon : [ 'btnReplay' ]
			},
			buttonMute : {
				css : {
					width : 70,
					height : 70,
					backgroundColor : 'rgba(20,200,10,.5)'
				},
				icon : [ 'btnUnMute', 'btnMute' ]
			},
		},
		onControlBar : {
			controlBar : {
				constant : false,
				showOnPoster : false,
				css : {
					//height : 50,
					backgroundColor : 'rgba(250,100,20,.5)'
				}
			},
			buttonPlayPause : {
				icon : [ 'btnPlay', 'btnPause' ]
			},
			buttonReplay : {
				icon : [ 'btnReplay' ]
			},
			buttonMute : {
				icon : [ 'btnUnMute', 'btnMute' ]
			},
			buttonFullScreen : {
				icon : [ 'btnFullScreen' ]
			},
			sliderProgress : {
				inline : true,
				css : {
					width : 120
				},
				bg : {},
				loaded : {},
				track : {},
				handle : {},
				onOver : function(){
					console.log( this.track )
				},
				onOut : function(){
					console.log( this.handle )
				}
			},
			sliderVolume : {
				css : {
					width : 60
				},
				bg : {},
				track : {},
				handle : {}
			},
			timeDisplay : {
				css : {
					height : 'inherit',
					color : '#ffffff'
				},
				fontSize : 18,
				fontFamily : 'Arial',
				alignText : Align.CENTER,
				bufferText : {
					left : 5,
					right : 5
				},
				showDuration : true
			}
		}
	}
})

VideoControls.controlBar : UIControlBar

Public access to the UIControlBar instance. All UIComponents added to this will be accessed via the variable.

Kind: static property of VideoControls

VideoControls.replayOnInteraction : boolean

Get|Set: A Boolean that changes if the video player will start over on any click interaction, default is false.

Kind: static property of VideoControls
Example

// GET
console.log(myVideoPlayer.controls.replayOnInteraction)

// SET
myVideoPlayer.controls.replayOnInteraction = false		
		v

VideoControls.unmuteOnInteraction : boolean

Get|Set: A Boolean that changes if the video player will unmute on any click interaction, default is false.

Kind: static property of VideoControls
Example

// GET
console.log(myVideoPlayer.controls.unmuteOnInteraction)

// SET
myVideoPlayer.controls.unmuteOnInteraction = true