3

I'm about to create a mobile website using HTML5 and want to use the HTML5 video tag.

I want the website to work with iPhone, iPad, Android and other smartphones/devices.

  1. Which video format should I choose? mp4?
  2. Which size should i use for width and height to get the best result?
  3. Which FPS (frames per second rate) should I use for the videos?

Thanks in advance.

Martin
  • 2,302
  • 2
  • 30
  • 42

1 Answers1

2

Those are pretty subjective questions, so I'll give you some rather subjective answers:

  1. I have made good experiences (hope others as well) with serving 3 media types: H264/MP4, OGG and WEBM for <video> elements, at least this combination worked fine on all devices I was able to check by now.
  2. In case you also want your video to be displayed inline on desktop browsers I'd say you should use the dimensions that are dictated by your layout. In case you are looking for a mobile only solution, a common resolution for 16:9 content would be 480x270 (that's what Quicktime Pro exports when you select "Save for iPhone"), if you are planning for tablet support as well you might want to serve alternative content for them.
  3. The lower the frame rate, the smaller the file, so you'll have to know by yourself how much filesize matters, the only thing I could advise would be using a full fraction of your original video frame rate (ie. 12.5fps if you want to reduce a 25fps source) as otherwise you'll get jittery drop-frame effects.

Also please see the great video section of Dive into HTML5

m90
  • 11,434
  • 13
  • 62
  • 112