html5 embed mp4 video | how to know if the device is an iphone 3/3gs or 4 | mp4 dimension are too big

i have a mp4 video embedded in html5. it works perfectly on every browser and on iphone4 and ipad开发者_如何学Python, but not on iphone 3 and 3gs, cause its dimension is 900px*508px.

how can i know in php (or even replace the entire video tag in javascript) on what device (iphone4 or 3G/3GS) im gonna show the page?

thanks a lot in advance!

You can serve up a different video (with a reduced size) using the media attribute, e.g.

<video controls>
   <source src="myfile.ogg" type="video/ogg">
   <source src="myfile.ogg" type="video/ogg" media="(max-device-width: 300px)">
</video>

You can read more about it here, scroll down to "Sending Differently-Compressed Videos to Handheld Devices".

You can probably check the user-agent to determine whether it is iphone4 or 3:-

echo $_SERVER['HTTP_USER_AGENT'];