: Right way to host HTML5 video I have a responsive site that has a blog which shows videos with HTML5. As of now, I use the following formats: MP4 HD video - for computer users MP4 SD video

@Turnbaugh106

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.

Vote Up Vote Down