angular-video-background

    1.0.3 • Public • Published

    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>

    Install

    npm i angular-video-background

    DownloadsWeekly Downloads

    15

    Version

    1.0.3

    License

    ISC

    Last publish

    Collaborators

    • b4dnewz