Make Me Pulse : Video Library
MMP Packages: video library for desktop and mobile devices
Table of contents
Installation
- Install with Bower:
bower install mmp.video
- Install with NPM:
npm install mmp.video
Documentation
Notes
This package uses module exports.
Videos Source: Vimeo freehd
Examples
Examples are located to src/scripts/examples.
Examples:
- basic video
- callback basic video (ready/loaded/...)
- context including VideoManager (to manipulate all video instances for play/pause/mute)
- fullscreen video
- controls elements for video (play/pause/stop/seek/progress cursor)
- controls callback for video (play/pause from buttons)
Compatibility
Supported on:
- Safari 6+
- Firefox 24+
- Chrome 30+
- Internet Explorer (waiting tests)
- Windows Phone 8.0+
- Android (waiting tests)
- iOS (7.0+)
Video
Options
urls
: (default{}
) specify an object of video extension urls. Extension allowed are mp4, webm, ogv, m4v and mov. Video script will choose automatically the better format desktop. For mobile, video extension used by default is m4v.cache
: (defaulttrue
) prevent cache when you're loading a video multiple times. Add random number at the end of video filename if you're setcache
to false. (example: filename.mp4?1234)autoload
: (defaulttrue
) preload video after object instanciation. Video can be loaded later withload
method.autoplay
: (defaultfalse
) play video after being loaded.isFullscreen
: (defaultfalse
) set fullscreen video. Important: you must use theresize
method of video object or video manager to resize videoisMuted
: (defaultfalse
) play video audioisLoop
: (defaultfalse
) loop videovolume
: (default.5
) video volumecontainerId
: (defaultvideo
) id container (do not include # symbol)videoId
: (defaultvideo-(random number)
) id video (do not include # symbol)poster
: (defaultnull
) poster video jpgsize
: (default{}
) specify container width and container height of video. Example:{width: 200, height: 200}
. if you use fullscreen video, do not specify video size-
callbacks
: (default{}
) video callbacks. see example to have the list of all callbacks available.-
videoLoadedCallback
: (defaultnull
) video metadata loaded -
videoCanPlayCallback
: (defaultnull
) video loaded and can play (readyState > 1) -
videoReadyCallback
: (defaultnull
) video ok to be played (readyState == 4) -
videoEndCallback
: (defaultnull
) video end -
videoRemovedCallback
: (defaultnull
) callback video removed from dom and object properties removed
-
Methods
videoDuration()
return video duration or 0 if video node is not added to DOM duration in milliseconds
timeRemaining()
return video time remaining or 0 if video node is not added to DOM time in milliseconds
load()
load video
play()
play video node and update controls time seekbar if controls are enabled
pause()
pause video node pause controls time seekbar if controls are enabled
stop()
stop video and set current time to 0. set control time seekbar to 0 if controls are enabled
restart()
restart video node
skip(time)
skip video time time in milliseconds
setVolume(volume)
set volume to video
- volume: (float) 0 to 1
setCurrentTime(currentTime)
set current time currentTime in milliseconds
- currentTime: (int)
setFullscreen()
set video fullscreen
show()
show video by removing hidden
class. Note: video is shown if autoplay
is set to true
hide()
hide video by adding hidden
class
addControls: (doneCallback, controlsOptions)
add controls options. see callbacks controls example for more information.
- doneCallback: (default:
null
) promise callback that lets video script matching global events to default controls video elements. - controlsOptions: (default:
null
) controls class elements- controlContainerId:
- playId: play button dom class
- pauseId: pause button dom class
- seekBarId: seek bar button dom class note: seekbar on default interface is an svg element
- seekBarProgressId: seek bar progress class
- seekBarBandId: seek bar band class
These properties can be edited to control options.
remove()
remove video instance
resize()
resize video container. call this method in window resize
event to have a fullscreen video. window sizes are set automatically.
Video Manager
Options
videos
: (default[]
) list all video instancescontext
: (defaultdesktop
) define video context (actuallydesktop
ormobile
). you have two video instances:VideoDesktop
andVideoMobile
. You can use this object or specify custom context to video manager and instanciate video withVideo
for better code comprehension.
Methods
resize()
resize videos which need to be resized. Depends on each video options
mute()
mute all videos
unmute()
unmute all videos
play()
play all videos
pause()
pause all videos
stop()
stop all videos
setMobileContext()
set mobile context will instanciate all Video class instances according to VideoMobile class. Useful if you work with mobile devices because you don't need to replace Video object by VideoMobile object.
setDesktopContext()
set mobile context will instanciate all Video class instances according to VideoMobile class. used by default