angular-video-background

html5 fullscreen video background in angular

Description

Eye-catching fullscreen video background is adopted by many modern websites for telling their stories. If you want to tell your own story in angular, you now have a choice. Just provide the video resouces, you can have your stunning video background right away.

Demo

you can see a demo here :)

Dependency

• angular (*)

How to get it

bower install --save angular-video-background

or

npm install --save angular-vidbg

Usage

include 3rd dependencies (angular, lodash) and dist/vidBg.js in your js file

include dist/vidBg.css in your css file

then:

<vid-bg resources="resources" poster="poster" full-screen="fullScreen" muted="muted" z-index="zIndex" play-info="playInfo" pause-play="pausePlay"></vid-bg>

angular
	.module('demo', ['ngVidBg'])
	.controller('mainCtrl', ['$scope', function ($scope) {
		$scope.resources = [
			'http://techslides.com/demos/sample-videos/small.webm',
			'*.ogv',
			'*.mp4',
			'*.swf'
		];
		$scope.poster = 'http://placehold.it/2000&text=you%20may%20want%20to%20have%20a%20poster';
		$scope.fullScreen = true;
		$scope.muted = true;
		$scope.zIndex = '22';
		$scope.playInfo = {};
		$scope.pausePlay = true;
	}]);

Note: .webm, .ogv, .mp4 are the supported resource types. .swf is the fallback resource for environment that does not support the above types.

options

| attribute | optional? | example | description | |-------------------|-----------|----------------------|---------------------------------------------------| | resources | no | ['xx.webm','yy.mp4'] | video resources | | poster | yes | 'zzz.jpg' | image shown before video loaded | | full-screen | yes | true | video will fill the width of its container | | pause | yes | false | whether to pause the video |

there are a few other configurable options you may also want to use: muted, control, loop, auto-play, z-index, error-msg

Features

• Dynamic change video resources and pause video
• Show video buffer status and played status

Coming soon

• dynamic video change
• detailed accessible information about your video including loading status, played range, etc.
• testing on different browsers/devices
• how to deal with legacy browsers and mobile

Credits

Inspired by this

references: [1], [2], [3]

License

MIT