jQuery HTML5 video background 1.1.1
Release 1.1.1 is now available on GitHub. This release includes a number of performance enhancements and fixes but retains the existing settings from the first release. Additionally i’ve created a number of public methods for the plugin, this will allow access to some of the internal features of the plugin.
Public methods
- play:
- Trigger a play/pause event on the chosen video background. Will play if the video is already paused. Will pause if the video is already playing.
- mute:
- Trigger a mute/unmute event on the chosen video background. Will unmute if the video is already muted. Will mute if the video is unmuted.
- destroy:
- Will destroy the chosen video background. Unbinds events bound when the video background is initialised and removes HTML attached to the DOM by the plugin. If a controlPosition parameter is set this will also have to be set to safely remove all HTML elements from the DOM.
- resize:
- When invoked this will resize the video background to the height of the document or window. The video background height affects the height of the document which affects the video background’s ability to negatively resize.
The demo page has been updated with the new code which when minified is 8Kb. You can find a shell file to minify the code in the build folder.
The source and issue tracking is available on GitHub.
Tags: HTML5, JavaScript, jQuery
31 Responses to “jQuery HTML5 video background 1.1.1”
[...] 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 George,
I’ve been looking around for a while for a html5 video background for my website. ( I am a film director) ANd your solution seemed so elegant to me.
But I haven’t got the foggiest about coding. Basically I want my whole website to be video, with some info on top.
Forgive me if my questions are not in the right place here.
Is it possible to have more than one video? Something like a playlist with ‘previous’ and ‘next’ buttons. Also, how do you get to resize a video when it has a different aspect ratio. I shot my short film in the 2.39:1 aspect ratio (anamorphic)
I’m trying to learn how to do all this myself, but if you could help me out a bit, I would greatly appreciate it.
Thank you
Delano
Hi Delano,
It’s certainly possible to create a playlist and load a new video source when the current video ends. It’s not something i’ve implemented, i don’t know of another plugin that’ll act as a background and have a playlist, it’s something i would consider in the future but i can’t promise anything soon.
The answer on Stack Overflow is a simple description.
The video element doesn’t act like a CSS image background, so it will deform if the containers aspect ratios doesn’t match the videos aspect ratio. I’m sure a solution will be developed but i’m not aware of one at the moment.
HTML5 video is an area with a lot of potential, popcorn.js for instance is very interesting but it also relatively new so not all the answers are there yet.
Hi George,
thanks for responding. I can indeed see all kinds of creative possibilities for HTML5 video already. But the technical side is way too complicated for me to learn in a reasonable amount of time.
I would love to showcase all this stuff on my site combined with my work. So if you have some spare time left.. …hahaha.
Anyway, I will keep checking in and see if you’ve added some stuff. I checked a few html5 video backgrounds and your solution runs the smoothest with the best picture quality.
It will be interesting to see where this technology will go.
Kind Regards
Delano
George first and foremost – this is awesome! So clean, simple, and efficient. Very well done.
I’m planning on using this for my personal portal (in development) – however, have a few questions.
1) What would the simplest way be to loop a video? I’m going to be editing together a 1 1/2 min video with original music as the “living BG” and would like to have it loop. This may be simple, and I’d just need to dive into the JS some more (a weak are for me).
2) I’m curious about the files you have under the video folder, and specifically their file type. From my understanding, MP4 should be all you need here, as it would playback in iOS devices (if H.264). What is the benefit of transcoding to .OGV and .WEBM? Is WebM specifically only for future chrome compatibility? Do you recommend an App/Program to transcode to these file types?
Regardless, as I already said, this is awesome, thanks much – very impressive work.
Best,
-Derek
Apologies, I figured out the looping question – asked before I really dug in. Am still curious about the file types though, and again – thank you!
For cross browser support of video this is a good reference: http://caniuse.com/video with the sub-features for formats below the table.
Basically you’ll need WEBM to support Firefox and Opera while Chrome may be dropping MP4.
Also if you’re looking at iOS, iPhone has an app based video player and won’t play video in the web page, iPad will work as expected.
Wow, for some reason I didn’t realize that about FF and MP4 – very good to know, am a little surprised, but live and learn.
One last question (I hope!) – I have everything working as I’d like now – my only issue is trying to adjust where the play and mute buttons appear on the page, and am having some difficulty moving them to where I’d like. Any simple trick here to move them? I may be biting off more than I know how to handle – regardless, thanks a lot for everything, been a fun project working on this.
The plugin option controlPosition will allow you to say which HTML element, class or ID you want to append the controls to. Once you’ve done that you’ll probably need the CSS position absolute to move it around as needed.
Awesome, thanks so much again for the return comments – will work on this some more tonight, and won’t ask anymore questions, lol
Here’s where I’m at so far, tons of thanks again, been real fun playing with – love the idea of making website NOT look like website – http://www.digital-derek
Adding WebM and OGV files tonight, so best on Chrome for now – I found an excellent transcoder that works great on a Mac – it’s pretty much drag and drop, open source, and free
http://www.mirovideoconverter.com/
Thanks a million again!
Grrr…wrong url – here you go!
http://derek-digital.com
Cool, nice work Derek.
Hi George,
we tried Your video background script, but it doesn’t play the video in different Browsers. Even Your demo page will not work as expected in Safari 5.1, Internet Explorer 8.0 and mobile Safari on iOS 5. It showas only the poster pic or nothing at all
Do You have any bugfix for that ?
Thanks in advance,
Stephan
Hi George
I love this script and will most likely be using it on a website here soon.
I have a few problems though.
The video background resizes up just fine, but I can’t manage to resize it back down again. When I make the browser window smaller the video stays large.
The read me says: “resize: When invoked this will resize the video background to the height of the document or window. The video background height affects the height of the document which affects the video background’s ability to negatively resize.”
Am I able to change this setting or is it not possible?
Looking at your example it behaves the same way as mine.
Hi guys,
IE8 won’t work as HTML5 video isn’t supported, for iOS, iPhone’s don’t play video in the web browser but have a separate video player so a background won’t work, iPad should work though. Safari 5.1 should also work, try placing the mp4 as the first video, this is what i’ve just done in the demo page.
For resizing it’s not a setting but how the browser deals with elements in the page. I don’t have a work around at the moment it’s something I’ll look at making a simple method for it but it is possible to manually resize the video with JavaScript.
Hope that helps.
Hi George ,
Nice coding, i really enjoyed. Can you please tell me how to change the opacity of the video ?
Thanks
Hi George,
What a fantastic plugin! Works like a dream on modern browsers pulling video locally…
…but Firefox won’t grab the video from a remote server. Stops after an initial connection. Firebug says “206 partial content”. Have you encountered this?
Thank you for your excellent work!
Khan you should try setting it through the CSS opacity declaration, caniuse.com/css-opacity or you could use jQuery to set opacity api.jquery.com/fadeTo/.
Jedd when i originally developed the plugin i used the videos available on html5demos.com/video so it should be able to get video from the remote server, try the videos from there as well.
If you can play those files then perhaps there’s a problem with the server you’re getting the videos from? Is the video large and it’s dropping connection or perhaps the server needs to know the video mime type? An example would be useful if you can share it?
Hi! Good tutorial, very interesting but only a question. How can I crete the .ogv and .webm videos? There is a plugin? I tried to testing with after effects but not work.
Thank you so much in advance.
Marko
I’m afraid you’ll have to find a video conversion tool yourself. Try handbrake.fr as a starting point.
Great plugin, thanks very much. Any plans to adapt it into a Drupal module in the (somewhat near) future???
Hello, George!
Thanks for perfect plugin!
In Chrome it work great, but in Opera or FF i have a problem – the video it to large,I thought that it was only problem of my site, but i tested your demo page on this browsers and found such problem on it too.
may be you know how to solve an extra large height in videos in opera and firefox?
Thanks for answer
p.s. sorry for my English – im from Russia=)
sorry, it was my fault – my css rules was bad=)
sorry again – your plugin perfect=)
Thanks!
Cool good to hear you got it working.
You made quite a jewel there George! And I know its a work in progress and can’t wait for more!!!
Putting those goodies on my website, ran into a few coding problems but no biggie. Feel free to checkout, critique and comment my site, I could use the professional observation
Cheers, Lawrence. Nice background effect with the circuit boards. To aid your development i’d suggest passing it through Total Validator and perhaps update to the HTML5 doctype.
Happy New Year all.
hi, george
Thanks for perfect plugin! but i need to have an alternative when the website is loaded in ie8 and versions of firefox. You have any ideia? Maybe Flash?
Thanks
Hi, yeah if the browser doesn’t support HTML5 video then this plugin won’t work. For IE8 you’d need a Flash alternative, unfortunately i don’t have the time to development at the moment.
Hi,
I like this video background a lot.
I was planning to add it to my site but i can’t understand how to resize it to window negatively. The video size scale more and more bigger never smaller.
Can you point me in the right direction?
thx
Hi, it’s not something i was able to resolve at the time, i couldn’t find a simple way of negatively resizing. The video background is a DOM element which affects the ability to measure the page height, unlike a CSS background image that resizes the image as a proportion of the exist DOM element.
I would suggest keeping a history of the size of the page/video and resizing negatively if the video is large than all the other elements in the page. I have a lot of project work on at the moment so can’t look for a solution at the moment.
Is it possible to make two diffrent buttons: one for play and one for pause? I am seaching solution to make working this script. $(‘.video-background’).videobackground(‘pause’);