I have a few questions:
1) How to optimize video for web page background?
2) Which format?
3) How much size?
4) Autoplay and buffering as soon as page and video loads
5) The moment you leave the page or lose focus, video should stop there itself and start from there as soon as it gets focus.
You can do this with jPlayer.org with some tinkering (and its a fairly good HTML5 video player, no brandings on your player etc...) with a flash fallback.
You can also do the focus stops and starts with some jQuery triggering as it watches events like that.
Higher resolutions of video will look better in full screen mode, which means it will look better in a full page layout (720p, 1080i, 1080p), format will depend, but you'll likely be looking at mpeg-4 since its a widely used format, you can check other supported formats on the jplayer.org website.
One thing to consider with your video resizing is its aspect ratio. You're vid player should do this automatically but in case it doesnt you have to make sure when you're reszing the video you keep your heights and widths proportional to its ratio. Here is a proportion calculation snippet i wrote up a while back, it shouldnt be difficult to port this to javascript
Code: Select all
<?php
/**
* Returns a proportional width or height.
*
* @param int $width Known width
* @param int $height Known height
* @param int $x New width or height
* @param string $type Default find height or width
* @returns int $result The resulting new width or height
*/
function get_proportional($width, $height, $x, $type = "height")
{
// Find the ratio from known height and width
$ratio = $height / $width;
if($type == "height")
{
//Determine new height from desired($x) width * the ratio
$result = $x * $ratio;
}
else
{
//Determine new width from desired($x) height / the ratio
$result = $x / $ratio;
}
return $result;
}
?>
Hope that helps
