mynewsdesk / bg-video

Fullscreen HTML5 background video

BgVideo

Display HTML5 video backgrounds in fullscreen.

Install via Bower

bower install bg-video

Test for HTML5 video support

if($.supportsVideo()) {
  // initialize code
}

... or with Modernizr

if(Modernizr.video) {
  // initialize code
}

Setup

$(function() {
  if($.supportsVideo()) {
    var video = new BgVideo($('#some_element'), {
      sources: [
        'http://techslides.com/demos/sample-videos/small.mp4',
        'http://techslides.com/demos/sample-videos/small.webm',
        'http://techslides.com/demos/sample-videos/small.ogv'
      ],
      cssPosition: 'absolute', // static|absolute|fixed
      alignment: 'top left', // top left|top right|bottom left|bottom right
      hideBodyScrollbars: true, // set body to overflow:hidden
      resizeWithWindow: true, // resize video on window.resize
      attachImmediately: true // attach video immediately to the DOM
    }, {
      autoplay:  true,
      controls:  false,
      loop:      true,
      muted:     true,
      poster:    null, // default: url to image
      preload:   'auto' // auto | metadata | none
      }
    );
  }
});

Exposed methods

...
video.play();
video.pause();
video.mute();
video.unmute();
video.destroy();
video.detach();
video.attach();
...

Working with events

Attach event listeners to the $video element by using jQuery's on-method.

...
video.$video.on('canplay', function() {
  console.log("Video can start playing");
});
...

Useful resources

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video http://www.w3schools.com/tags/ref_av_dom.asp https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/using_html5_audio_video/controllingmediawithjavascript/controllingmediawithjavascript.html

bg-video's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.