I'd like to display a video for users with high bandwidth and a static image for those with low bandwidth. I could just show images to all mobile web users.
I have found a mobile detection class PHP Mobile Detect.
What is the best way to go about this?
This is not really possible with HTML/CSS/JS. You could download a test file with Javascript and measure the time, but this is bandwith wasting in my eyes. The only easy mechanism available that comes to mind is Flash, which has an inbuilt function for this (although I don't know how it actually works).
As a tip, I'd recomment showing the static imgage to all users at first with a neat little button where you can change to the video (I myself -and many others- prefer this even though I have a very good connection).