Right way to host HTML5 video

Question

I have a responsive site that has a blog which shows videos with HTML5.

As of now, I use the following formats:

1. MP4 HD video - for computer users
2. MP4 SD video - for mobile users
3. WebM HD Video - for computer users
4. WebM SD Video - for mobile users
5. poster.jpg - poster with width: 640px for all devices.

My HTML5 to select a device is:

<video controls="controls" height="260" poster="poster.jpg" preload="none" width="463">
    <source media="all and (max-width: 480px)" src="video_sd.mp4" type="video/mp4" />
    <source media="all and (max-width: 480px)" src="video_sd.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
</video>

Summarizing, having 4 files of the same video for a responsive site results in approximately 1GB data per video ...

My question is: Am I doing this in right way?

Answer 1

Inline CSS

Your code looks OK apart from the fact I'd prefer to use the styling within the CSS rather than inline, that way you can adjust the style according to each device simply using:

video {height:260px;width:463px;} then using media queries within the CSS you can scale the video easier for different devices as the height 260px width 463px doesn't sound too friendly on mobiles.

Bitrate Matters

I'd thought I'd bring this up since you've mentioned that your file sizes are 1gb. While this is not bad it might be if the runtime of these videos are low and I'll explain. To satisfy your target audience with smooth video and less buffering you need to know the average download speed for broadband users and the average down speed for mobile users.

For example... in the UK 3G data average speed is 2mbits so these users will not be able to handle video more than 2000kbps (kilobits per second) so you need to ensure your VBR (Variable Bit-rate) doesn't exceed 2000kbps again... You then repeat this process for the broadband users but with the average for them.

Also depending on the video type you may be able to get away with much lower bitrates.. fast motion video generally requires more bitrate while slow motion you can get away with less. Generally SD won't require more than 900-1000kbps however I recommend taking a look at ripping sites for more information about getting perfect encodes. Most automated encoders do not get the video a perfect size and perfect quality. I call them lazy encoders.