What Combinations Of Video Formats And Video And Audio Codecs Can Be Played In Most Modern Browsers Using Html5?

We want to play video with audio using the

Solution 1:

container: MP4, video codec: H.264, audo codec: AAC. If you want everyone to be able to play the video go with a resolution of around 640x360 ("360p") and a bitrate of around 800kbps, but that really depends on your source input. In general don't use a resolutions above 1280x720 or bitrates above 2500kbps unless you have a lower-quality fallback option.

You need to make sure that the MP4 is "streaming optimized" or "progressive download ready", which means that the MOOV header information is at the front and the video can start playing back immediately. MP4 will cover most mobile/desktop browsers, but you may want to provide a WebM as well for some versions of Firefox + Opera.

Here's an example tag with mp4 and webm fallback included, with direct link fallback if browser doesn't support html5 (some mobile devices):

<divstyle="width:640px; height: 360px; position: relative"><videowidth="100%"height="100%"controls="controls"poster="http://url/of/my-preview.jpg"><sourcesrc="http://url/of/my-video.mp4"type="video/mp4; codecs='avc1.64001F, mp4a.40.5'"><sourcesrc="http://url/of/my-video.webm"type="codecs=vp8,vorbis"><ahref="http://url/of/my-video.mp4"><imgsrc="http://url/of/my-preview.jpg"alt="Click to play video because your browser doesn't support HTML5 video"style="width:100%; height: 100%"></a></video></div>

If you need to convert videos to MP4 try the excellent tool Handbrake Also, http://diveintohtml5.info/video.html Is a good resource.