CODEWITHSUNDEEP
htmlvideocontent-management-systemhtml5-video
Simon
Simon

Reputation: 1733

Using an h264/mp4 video as background for a website

A client of mine wants to have a mp4 video as a video background for the entire site. It's already going to be a pita to make sure it works in our CMS because they don't want the video to reload when going to a different page.

The file they have send me is 1080p and approx. 100MB large and is 2 minutes long.

Is there any way I can resize/rescale the video and use it as a video background in an html5 website?

Should I tell the client that it won't be user friendly, will be a bandwidth hog and will certainly increase development costs.

We don't build Flash Websites at our agency as a general rule so that's not an option.

Upvotes: 0

Views: 815

Answers (3)

San
San

Reputation: 1

Full screen video for a website: look at the source code of www.gossdekort.com You may even add a menu above the video

Upvotes: 0

Nippey
Nippey

Reputation: 4739

You could use the html5 <video> tag in order to play that video and do the rest of the navigation via AJAX.

But you will need to provide different video formats for browsers that do not support h264, like Opera. I recommend webm as alternative.

You will need to shrink the size of the video, I guess both in quality and resolution.

For browsers of the pre-html5 aera I would recommend a static image ;)

All-In-all: A cross-browser compatible solution will be a PITA. Modern browsers have techniques that allow such a solution. I guess it is possible, but you will have to provide a fallback for the ~5% of the users with incompatible browsers or too slow CPUs!

Upvotes: 1

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

In order to achieve browser compatibility you would have to convert the video to Ogg Theora as well (this will reduce it's size but it would play only under WebKit/Mozilla). HTML5 video supports buffering but in a different manner under different browsers. WebKit for example tries to pre-buffer the entire video, IE pre-buffers a fixed size chunk at a time, etc. So this would perform differently across browsers.

Upvotes: 1

Related Questions