jQuery HTML5 video background 1.0.0
I’ve recently been working on a jQuery plugin that uses a HTML5 video as the background for a page. An idea that perhaps owes far too much of it’s inception to splash pages, it was worth investigating; as a test for HTML5 video player development and because of it’s interesting use of the video element.
There is a demo page available. I’ve used the existing site theme for the demo page which should adequately show the plugin is capable of being applied anywhere but lacks the impact a dedicated page design would provide.
The plugin should work in any browser that supports HTML5 video and although I’ve provided some styling in the demo page and in the source on GitHub, your actual page is likely to be bespoke so the CSS is only provided as an example.
The source and issue tracking is available on GitHub.
Update – 30th August 2011
A new version of the plugin has been created including fixes and ideas from the comments here and issues on GitHub. Find out more at the blog post jQuery HTML5 video background 1.1.1
hi, I found your plugin and I have to say that ‘is amazing..!
Just realize you posted it few days ago.
I tried with another plugin before but it is very hungry on ressources.
Have one or two questions:
I tried the site on blackberry and everything is fine, I can see the page with no video and no background image from the plugin, I just see the css I choose for the body.
But on itouch/iphone, the video remains under the text and links, so I can’t click on the links on my page..
Do you know if there is a way to disable the video for mobile safari..?..
maybe with : isMobileSafari
but I don’t know java enough..
And I would like to be able to put the play and pause states on a button I have (soundcloud custom jquery mp3 player), that I use to play and pause the music.
Is there a simple way to add the function to other’s elements…?
have a look here if you want:
http://tinyurl.com/5syqlkp
Thanks anyway..!
Regards.
S.
Hi, again..
Finally I used a javascript to redirect the mobile users to a simple html page.
if you have a clue for the button issue..!
Thanks
S.
Hi Stephane, there are two callbacks in the plugin, one when the video is preloading and one when the video has loaded. Callbacks allow you to write additional JavaScript that will be triggered by the plugin.
A callback should allow you to use the other buttons. It’ll look something like this:
$(‘.video-background’).videobackground({
videoSource: ['video/big-buck-bunny.webm',
'video/big-buck-bunny.ogv',
'video/big-buck-bunny.m4v'],
controlPosition: ‘#main’,
poster: ‘video/big-buck-bunny.jpg’,
loadedCallback: function(){
$(‘div’).click(function(event) {
event.preventDefault();
if ($(‘.video-background video’).get(0).paused) {
$(‘.video-background video’).get(0).play();
}
else {
if ($(‘.video-background video’).get(0).ended) {
$(‘.video-background video’).get(0).play();
}
else {
$(‘.video-background video’).get(0).pause();
}
}
});
}
});
The code wrapped in loadedCallback is added on to the plugin and causes any div’s on the page to trigger the video to play or pause when clicked. Tabbing isn’t working in comments so I’ve highlighted the start and end using strong tags.
The test site looks great.
Hi thanks for your answer..
glad you like the page.!
I will check your code and try to make my button works.
Here is the final page.
http://tinyurl.com/42rstoc
I put a detect mobiles browsers in htaccess and bulit a more compatible page for them.
I noticed that on safari the video take a little time to start..My connection is a little slow but the video start quickly on firefox and chrome and the mp4 is only 4 Mo.
it’s look like it wait to the entire movie to be loaded before starting.?
Thanks again for this great plugin !
Patterson this code as HTML5, video will be able to be seen as the background in Ipads as well as all browsers correct except for mobile correct? I have been looking for non flash solutions. How well does this hold up?
Please Advise
George any way to make this work in IE 8 or older IE browsers?
Hey Patterson can I call up a flash video as background for older browsers if it does not recognize HTML 5 video as background?
Please Advise
Hi Tim, the plugin currently doesn’t have a method for using Flash video, so no support for IE8 or older.
Flash support is something i will be working on in conjunction with this project: https://github.com/rlayte/simple_video_player.
It should work for iPad and other tablets, i don’t own one to test but will investigate.
Could this be embedded to use as the background of a wordpress site? Nice work!
The demo page is using WordPress, i wanted to make the demo a real world example.
Add a div to the page using JavaScript that the video plugin will then attach to:
jQuery(‘body’).prepend(‘<div class=”video-background”></div>’);
jQuery(‘.video-background’).videobackground({…
The video-background div then has a set of styles attached to it:
.video-background {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
That should get you kick started.
Hi, great plugin, implementation easy as can be but I’ve found that Firefox 5/6 Mac only loads the poster, not the video, I saw this was raised on github but don’t have membership, I can give you a link but it’s a private website so I’d rather email it to you if possible!
Hello,
First of all it’s a great plugin. It’s using very little CPU.
Anyway, I have few concerns:
1. I can’t get this plugin work in IE9. I know there’s a problem with older IE browser versions. Can it run in IE?
2. How can I disable audio by default without showing and clicking audio button to turn sound off?
3. I’ve enabled loop within jquery.videobackground.js file (loop: true) but video stops at the end.
Many thanks in advance for your help.
Best regards,
Adnan
anonymous – GitHub is a free service i recommend you give it a try. I’ll email you using the email address used in your comment.
Adnan – I recently checked in to GitHub a fix for IE9. You should be able to run a video in IE9. Download the update from GitHub.
I should have surfaced the mute as a public function. You can probably still do this with a loaded callback. I’ll post an example on here later.
The loop should work, do you have an example?
Adnan your problem is similar to Stephane’s. You can use a loaded callback to set the audio:
$(‘.video-background’).videobackground({
videoSource: ['video/big-buck-bunny.webm',
'video/big-buck-bunny.ogv',
'video/big-buck-bunny.m4v'],
loadedCallback: function() {
$(‘video’, element).attr(‘muted’, true);
$(‘video’, element).get(0).volume = 0;
$(‘.ui-video-background-mute a’, controls).toggleClass(‘ui-icon-volume-on ui-icon-volume-off’);
$(‘.ui-video-background-mute a’, controls).text(element.videobackground.settings.controlText[3]);
}
});
This will set the audio to mute and set the icon and text to the mute state. It should fire as soon as the video is loaded and ready to play.
Hi George,
Many thanks for your help. I’ve managed to solve the IE9 and loop issues, but still can’t turn the sound off by default. When I add lines you gave me to the code then video disappears completely. I’m not sure I’m doing it right. Here is the script from the header of my page:
$(document).ready(function() {
$(‘body’).prepend(”);
$(‘.video-background’).videobackground({
videoSource: ['/video/video.mp4',
'/video/video.webm',
'/video/video.ogv'],
controlPosition: ‘#main’,
poster: ‘/video/video.jpg’
});
});
Best regards,
Adnan
Hey George,
Quick question, how come this doesn’t work for safari?
Not sure but will investigate.
Problem in Safari should be resolved now. I was calling a .m4v file when i should have been calling a .mp4 video file.
Shouldve known that myself. Worked like a charm! thanks again!!
curious though. What do you use to convert your html5 videos? I’m using Miro video converter. Once they are uploaded to the web, it takes a while for them to load.
or is there a way to play them as soon as they are loaded?
I’ve previously used handbrake but generally reference Video – Dive into HTML5 for any codecs i’m unsure of.
Hi George,
Many thanks for your help. I’ve managed to solve the IE9 and loop issues, but still can’t turn the sound off by default. When I add lines you gave me to the code then video disappears completely. I’m not sure I’m doing it right. Here is the script from the header of my page:
$(document).ready(function() {
$(‘body’).prepend(”);
$(‘.video-background’).videobackground({
videoSource: ['/video/video.mp4',
'/video/video.webm',
'/video/video.ogv'],
controlPosition: ‘#main’,
poster: ‘/video/video.jpg’
});
});
Best regards,
Adnan
Adnan try deleting controlPosition: ‘#main’ to start with as the page doesn’t have a div with id of main as far as i know. The controlPosition has a default of being in the video-background div. I’ll have a fresh look at the weekend.
Hi George,
When I add your code to mute sounds then the video disappears completely. Bellow is the full code from my website so please take a look.
Best regards,
Adnan
START SCRIPT
$(document).ready(function() {
$(‘body’).prepend(”);
$(‘.video-background’).videobackground({
videoSource: ['/video/SS11.mp4',
'/video/SS11.webm',
'/video/SS11.ogv'],
poster: ‘/video/SS11.jpg’,
loadedCallback: function() {
$(‘video’, element).attr(‘muted’, true);
$(‘video’, element).get(0).volume = 0;
$(‘.ui-video-background-mute a’, controls).toggleClass(‘ui-icon-volume-on ui-icon-volume-off’);
$(‘.ui-video-background-mute a’, controls).text(element.videobackground.settings.controlText[3]);
}
});
});
END SCRIPT
Adnan, if you get a fresh update from Github, i’ve updated the script to use public methods. One method is .videobackground(‘mute’).
I’ll update the example page to demonstrate it working. Below is what the update will look like. This should fix the mute issue you have.
$(document).ready(function() {
$(‘body’).prepend(‘<div class=”video-background”>‘);
$(‘.video-background’).videobackground({
videoSource: ['video/big-buck-bunny.mp4',
'video/big-buck-bunny.webm',
'video/big-buck-bunny.ogv'],
controlPosition: ‘#main’,
poster: ‘video/big-buck-bunny.jpg’,
loadedCallback: function() {
$(this).videobackground(‘mute’);
}
});
});
Hi George,
in which php. page of my wordpress site should i add this:
jQuery(‘body’).prepend(‘’);
jQuery(‘.video-background’).videobackground({…
??
Good Afternoon George Paterson fails to implement the jQuery Plugin wordpress urgently need your help if you would kindly tell me where I put the code to work because everything I have accomplished nothing and no thank you very much for your good explanation atencion.seria requires the installation of the code.
Att:Roger Vega.
Buenas Tardes George Paterson no logro implementar el Plugin Jquery en wordpress es urgente necesito de su ayuda si fuera tan amable de explicarme en donde debo situar el codigo para que todo me funcione porque no e logrado nada muchas gracias por su atencion.seria bueno una explicación precisa de la instalación del código.
The JavaScript call could be added anywhere you have access, you could try creating a new template or adding the code in the body content editable in the WordPress CMS.
Hi Georges,
As said already an anonymous in a comment, it seems that the video doesnt work on FireFox (9) for mac.
Do you know why ?
Thanks
PS : happy new year
Hi George,
is there a possibility to integrate the PlugIn in WordPress. I’ve tried many ways to embed it in the header.php – unfortunately without success
…could you help me please with my problem?
Greetings from Germany
Hi Fil, demo page seems to work for me in FF9 on Mac.
Sorry Sandro, it’s not something i can help with at the moment due to a lack of time.
Hi George! Fantastic plug-in… I’m trying to implement a Flash-less full browser video background web page (what a mouthful!) and I was wondering if it is possible to have multiple videos play one after another. Thanks in advance!
Is this plugin possible with HTML4?
Hi Aw, sorry missed your comment, yes it is possible but would require additional code to feed the playlist.
Hi Tanjia, the browser needs support for the HTML5 video element for the plugin to work.
HTML5 ok, but I want this plugin with HTML4. Could you please say what code is required and where will I edit.
Another problem, .mp4 video is not working here. What is the problem.
Hello George, thanks for your nice jQuery plugin, i’m trying to use it in my wordpress site.
I’ve put this code in header.php:
jQuery(‘body’).prepend(”);
jQuery(‘.video-background’).videobackground({
videoSource: ['video/test.mp4',
'video/test.webm',
'video/test.ogv'],
controlPosition: ‘#main’,
poster: ‘video/test.jpg’,
loop: ‘true’
});
copied the jquery.videobackground.js into the /js folder of my theme and create a /video folder with the video contents.
The web console of Firefox give me the following error:
jQuery(‘.video-background’).videobackground is not a function
Have any idea of how to fix it?
Best regards
Enrico
Is there any way to make this so that the video turns on when you mouseover the div, and turn off on mouseout?
Hi Enrico, i’d have to see it on a site to get a better idea for what is wrong.
Hi Nicole, check out this comment:
http://www.georgepaterson.com/2011/06/13/jquery-html5-video-background-1-0-0/#comment-656
Instead of a click, chose a hover event and video element for the loadedCallback and that should do what you need.
Hi George, a lot of thanks for your nice jQuery plugin. I am trying to use in my website. But Here are the some problem of browser Compatible. IE9 is not working this video. Sometime working on firefox,safari. But It’s work fine on google chrome. So, How can solve this problem, please tell me.