MP4 video support

<div id="player">
<a href="small.mp4">Download MP4 video</a>
</div>

<style>
#player2 {
  display: inline-block;
  background: #000 url(small.png) no-repeat scroll 50% 50%;
  -webkit-background-size:cover; 
  -moz-background-size:cover; 
  -o-background-size:cover; 
  background-size:cover;
}
</style>
<div id="player2">
<a href="small.mp4">Download MP4 video</a>
</div>

<script>
function supports_mp4() {
  try {
    return !!document.createElement('video').canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/, '');
  } catch(e) {
    return false;
  }
}

function supports_flash() {
  var hasFlash = false;
  try {
    var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
    if (fo)
      hasFlash = true;
  } catch (e) {
    var fm = navigator.mimeTypes["application/x-shockwave-flash"];
    if (fm && fm.enabledPlugin)
      hasFlash = true;
  }
  return hasFlash;
}

if (supports_mp4()) {
  document.getElementById('player').innerHTML = '<video src="small.mp4" poster="small.png" playsinline controls width="480" height="270">';
  document.getElementById('player2').innerHTML = '<video src="small.mp4" playsinline controls width="480" height="270">';
} else if (supports_flash()) {
  var flash = '<object width="480" height="270" type="application/x-shockwave-flash" data="flashmediaelement.swf">' +
  '<param name="movie" value="flashmediaelement.swf" />' +
  '<param name="flashvars" value="controls=true&file=small.mp4" />' +
  '</object>';
  document.getElementById('player').innerHTML = flash;
  document.getElementById('player2').innerHTML = flash;
}
</script>

The video is based on sources provided by Sintel, the Durian Open Movie Project.

The Flash player is from the MediaElement.js project.