Make Me Pulse : Video Library

MMP Packages: video library for desktop and mobile devices

Table of contents

• Installation
• Documentation

Installation

• Install with Bower: bower install mmp.video

Documentation

This package uses module exports.

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