angular-video-background

light module for using any video as background with many options

DEMO

Getting started:

Download the module using npm package manager:

npm install angular-video-background

with bower package manager:

bower install --save angular-videos-background

or download it directly from GitHub.

Add the style to your header:

<link rel="stylesheet" href="angular-video-background.min.css">

Add the script to your body:

<script type="text/javascript" src="angular-video-background.min.js"></script>

and than add the module to your application dependencies:

angular.module('app', ['video-background'])

and you can start to use the directive video-background it in your application.

Basic usage:

The directive most important attribute that must be specified in order to work correctly. The attribute is source, that specify the object with the source/s of the video in the format type: "source".

// example source object
$scope.myVideo = {
  mp4: "public/myvideo.mp4",
  ogg: "public/myvideo.ogg"
}

Note: you must pass a object to the source attribute.

<video-background source="myVideo"></video-background>
<video-background source="{ mp4: 'path/to/video.mp4' }"></video-background>

You can optionally bind keyboard press to video controls by using key-controls attribute.

Directive attributes:

• source: the object containing the video source/s
• autoplay: set the video auto play attribute (default true)
• volume: an number value from 0 to 1 to set the initial volume
• autopause: autopause the video in case of seeking
• key-controls: if the attribute is specified will bind keyboard controls
• show-time: enable or disable the current time view
• on-firstplay: a callback to run when the video play for the first time
• on-firstend: a callback to run when the video ends for the first time
• start-time: specify a custom start time for the video (expressed in int/float es: 1.50)
• end-time: specify a custom end time for the video (expressed in int/float es: 17.25)

Examples:

source

The object containing the source/s of the video to show. This attribute is necessary for the directive to work.

<video-background source="{
  mp4: 'mySource.mp4',
  ogg: 'mySource.ogg',
  webm: 'mySource.webm'
}"></video-background>

auto-play

The autoplay attribute will start the video when it's ready to play. (like the normal html autoplay attribute)

start-time

Specify a custom start time for the video, pass a number, can be a float.

<video-background source="myVideo" start-time="3.75"></video-background>

end-time

Specify a custom end time for the video, pass a number, can be a float.

<video-background source="myVideo" end-time="15.35"></video-background>

initial volume

Start the video with initial volume of 0

<video-background source="myVideo" volume="0"></video-background>

autoplay & autopause

Specify a custom end time for the video, pass a number, can be a float.

<video-background source="myVideo" autoplay autopause></video-background>

enable keyboard controls

Specify a custom end time for the video, pass a number, can be a float.

<video-background source="myVideo" key-controls="true"></video-background>