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 <video> tag.

For example, can the files be in Quicktime container format? Can they be h.264 and MP3 inside of Quicktime and still play in most browsers? Can they be h.264 and AAC inside of Quicktime and still play in most browsers?

We do not care about Internet Explorer older than version 11. We do care about current versions of Chrome, Firefox and Safari, including their mobile versions.

Edit So according to the comment by @Widor and http://caniuse.com/#feat=video I can use the video tag, however, that page says nothing about what kind of video I can put into the video tag.

回答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):

<div style="width:640px; height: 360px; position: relative">
  <video width="100%" height="100%" controls="controls" poster="http://url/of/my-preview.jpg">
    <source src="http://url/of/my-video.mp4" type="video/mp4; codecs='avc1.64001F, mp4a.40.5'">
    <source src="http://url/of/my-video.webm" type="codecs=vp8,vorbis">
    <a href="http://url/of/my-video.mp4">
      <img src="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.

来源：https://stackoverflow.com/questions/29350089/what-combinations-of-video-formats-and-video-and-audio-codecs-can-be-played-in-m

标签

html5

audio

video

h.264

quicktime