jQuery HTML5 video background 1.3

Release 1.3 is now available on GitHub. This release includes a number of improvements to the code including requests from ursbraem, Colin-Insivia and papandreou.

Implementation remains the same but with the addition of video type as a parameter associated with the video source and the resizeTo option allowing the default resize event to be turned off.

Unit tests using QUnit are contained in the tests folder and show a number of implementations. Further tests can be added as requested.

The demo page has been updated with the new code.

The source and issue tracking is available on GitHub.

13 Responses to jQuery HTML5 video background 1.3

  1. George Paterson says:

    Pulling up comment from previous thread:

    Hi Phillip, this site is WordPress based, i’ve linked the JavaScript and called the plugin in a new template i created just for that purpose.

    To be honest it can probably go anywhere including a content managed page.

    I’m prepending the div container for the video background to the body tag before loading the video background in to that div. Since the div is absolutely positioned and set to the height and width of the viewport as long as the div is higher in the DOM it will sit behind whatever you need. So the plugin itself a pretty much self contained. However there’s no widget integration it’s all manual.

  2. George Paterson says:

    It’s open sourced under the MIT or GPL Version 2 licenses Shayaa, so yes.

    Clarkufa, one of the plugin options is for a loadedCallback, put your function code in there, you’ll want to listen for a video ended event and then trigger your page load.

  3. jeremy says:

    great plugin, thanks. i can get everything working, however some mp4s do not play in safari. i think i have narrowed this down to an encoding issue, and ive played around with different settings in handbrake to no avail. any idea what the recommended settings are for mp4 so that they can play in safari? the big buck bunny mp4 works fine, however that one is encoded.

  4. Howman says:

    I have few questions?

    1. Right now in firefox UX 17.0a1 the video width is cut off same as your demo page is there a way to get it to the size of the page so it does not look cut off.

    2. Could you add the ability to add more then one video and maybe even random pay a list of like 3 or 4 different videos.

    I really like your plugin it was prity easy to get it working even with a script that has proto type in it.

  5. Steve Burgin says:

    Thanks for your hard work.
    I’m a noobie to javascript. Up on loading my page I want my poster image to display as well as the Controls but I’m stuggling. When I use…
    autoplay: false,
    I get my poster but loose the controls. I tried…
    loadedCallback: function() {
    $(this).videobackground({controlPosition: ‘#main’});
    but it didn’t work.

    Where am I going wrong?

  6. Rune says:

    Hi, is it possible to make the video background play continiously while clicking form page to page in wordpress?

  7. George Paterson says:

    Hi all, sorry just started a new job so haven’t previously been able to respond.

    Jeremy, not sure i’ll have to look in to it.

    Howman, the video doesn’t perform like a background image so it’s not something i can change right now. Playlist though i can look in to.

    Steve, the default controls only come in to play when a video is available to control otherwise you would be sending events to a video that doesn’t exist. I can look at an option to disable the controls and you could create new controls the play/mute events can be bound to?

    Rune, sorry not possible unless the content you were loading was AJAX based, otherwise the video will reload when the page refreshes.

Comment on jQuery HTML5 video background 1.3

Your email address will not be published.

You may use these HTMLtags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>