@stinkstudios/component-video v0.2.7

Stink digital Video Component

A simple video component for videos and youtube videos.

Installation

npm install @stinkdigital/component-video

Usage

let parameters = {
	src:"assets/test.mp4",
	onEnd:onVideoEnd,
	onPlay:onVideoPlay,
	onPause:onVideoPause,
	onProgress:onVideoProgress
}

let videoPlayer = new VideoPlayer(parameters);

document.body.appendChild(videoPlayer.el);

Parameters for VideoPlayer

• el: dom element ( dom element to attach player to )
• src: string
• audioSrc: string ( Only works on mobile devices where use Inline player )
• youtubeId: string ( If have this parameter it will ignore the other sources and play the youtube video )
• loop : boolean (false)
• autoplay : boolean (false)
• preload : string ('auto')
• crossOrigin : null
• volume : int (1)
• controls : boolean (true)
• forceInline : boolean (false) ( Enables the iOS hack to play video inline )
• resize : boolean (false) (disabled if youtubeId is present)
• pageVisibility : boolean (false) ( Will pause and play the video on pageVisibility change )
• width : string ('100%')
• height : string ('100%')
• error : boolean (true) ( Will throw a new Error on error. Set to false to stop this)

Event Callbacks

• onMetadata
• onCanPlay
• onEnd
• onError
• onPause
• onPlay
• onProgress
• onTimeUpdate
• forceNativePlayer ( Force the mobile device to use native player instead of Inline player)

API

• play()
• pause()
• seek(time)
• getPlayer() (get the video element or youtube player)
• destroy()
• loop : boolean
• playing : boolean (returns if video is playing boolean)
• paused : boolean (returns if video is paused boolean)
• currentTime
• duration (returns video total duration)
• volume : int (0 - 1) (can set or get the video volume)
• videoReady : boolean (returns if video is in ready state boolean)
• setSize(width:string, height:string)

Note

Compiled into ES5 and ES6. See package.json

"main": "lib/index.js",
"jsnext:main": "es/index.js",

Development

npm run dev

Build

npm install
npm build