# mmp.video

> MMP Packages: video library for desktop and mobile devices

Latest version **0.1.0** (published 2014-12-02) · 0 weekly downloads

## Install

```sh
npm install mmp.video
pnpm add mmp.video
yarn add mmp.video
bun add mmp.video
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2014-12-02 |
| First published | 2014-12-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | * |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Make Me Pulse |
| Maintainers | makemepulse |

## Links

- npm: https://www.npmjs.com/package/mmp.video
- Repository: https://github.com/makemepulse/mmp-video
- Homepage: http://makemepulse.com/
- Issues: https://github.com/makemepulse/mmp-video/issues
- npm.io page: https://npm.io/package/mmp.video

## Recent versions

- 0.1.0 (latest) — 2014-12-02

## README

# Make Me Pulse : Video Library

[![Bower version](https://badge.fury.io/bo/mmp.video.svg)](http://badge.fury.io/bo/mmp.video)

MMP Packages: video library for desktop and mobile devices

## Table of contents

- [Installation](#installation)
- [Documentation](#documentation)

## Installation

- Install with Bower: `bower install mmp.video`

## Documentation

This package uses module exports.


### Examples

Examples are located to [src/scripts/examples](https://github.com/makemepulse/mmp-video/tree/master/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](https://github.com/makemepulse/mmp-video/tree/master/src/scripts/examples/CallbacksVideo.coffee).
  - `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](https://github.com/makemepulse/mmp-video/tree/master/src/scripts/examples/ControlsCallbacksVideo.coffee) 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

---
_Source: https://npm.io/package/mmp.video · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._