More and more web sites are using video to convey information. Most sites use a single resolution for their videos. If you want to use a responsive design approach, that is undesirable. Fortunately you can use media queries to create responsive HTML5 video as Ian Devlin demonstrates.
This is a good solution, but there is even something better! At least in theory. Apple created the HTTP Live Stream (HLS) specification. Advantage is that it takes the available bandwidth into the account and automatically selects the appropriate video stream. This is especially helpful on mobile. This way you also only download the parts that you are watching. And you can jump forward in the video without having to wait until the complete video has been downloaded.
Sounds great, but usage is a bit tricky. HLS is supported on iOS, Mac, Android 3.0 or later and Flash (if the Flash player has a HLS component). I created a HLS test page to see how good the actual support is on different devices.
[update] HLS will be supported in Windows 10
For video conversion I use FFmpeg. Creation of HLS is possible with FFmpeg, but not really well documented. So I had to figure out how to create the video streams. After a lot of research and experimentation I created my FFmpeg HLS reference implementation that is available on GitLab.
On iOS the created video plays without problems on new devices. Older iOS devices with a maximum resolution of 480x320 pixels seem to select the best quality stream available, even if they cannot play it. For Android you have to create a MP4 video and before converting it into a MPEG stream. Doing this in a single command creates a choppy stream on Android. Flash playback has still some issues if you change the bitrate. So I still have some work to do.