angular-vidbg

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