Make Me Pulse : Video Library

MMP Packages: video library for desktop and mobile devices

Table of contents

• Installation
• Documentation
  • Notes
  • Examples
  • Compatibility

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: (default true) prevent cache when you're loading a video multiple times. Add random number at the end of video filename if you're set cache to false. (example: filename.mp4?1234)

• autoload: (default true) preload video after object instanciation. Video can be loaded later with load method.

• autoplay: (default false) play video after being loaded.

• isFullscreen: (default false) set fullscreen video. Important: you must use the resize method of video object or video manager to resize video

• isMuted: (default false) play video audio

• isLoop: (default false) loop video

• volume: (default .5) video volume

• containerId: (default video) id container (do not include # symbol)

• videoId: (default video-(random number)) id video (do not include # symbol)

• poster: (default null) poster video jpg

• size: (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: (default null) video metadata loaded
  • videoCanPlayCallback: (default null) video loaded and can play (readyState > 1)
  • videoReadyCallback: (default null) video ok to be played (readyState == 4)
  • videoEndCallback: (default null) video end
  • videoRemovedCallback: (default null) 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 instances

• context: (default desktop) define video context (actually desktop or mobile). you have two video instances: VideoDesktop and VideoMobile. You can use this object or specify custom context to video manager and instanciate video with Video 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

Videos

Free videos