Create a HTML5 Video Dexterity Content Type for Plone

<video controls="controls" autoplay="autoplay" width="960" height="auto">
  <source src=""
    tal:condition="context/webm_video_file"
    tal:attributes="src string:${context/absolute_url}/@@download/webm_video_file/${context/webm_video_file/filename}"
    type="video/webm"
  />
  <source src=""
    tal:condition="context/video_file"
    tal:attributes="src string:${context/absolute_url}/@@download/video_file/${context/video_file/filename};"
    type="video/mp4"
  />
  <source src=""
    tal:condition="context/ogg_video_file"
    tal:attributes="src string:${context/absolute_url}/@@download/ogg_video_file/${context/ogg_video_file/filename}"
    type="video/ogg"
  />
    <object type="application/x-shockwave-flash" width="960" height="540"
    data="http://releases.flowplayer.org/swf/flowplayer.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" 
      tal:attributes="value string:config={
                        'ratio':'1',
                        'playlist':[{
                          'url':'${context/absolute_url}/@@download/video_file/${context/video_file/filename
                        }',
                          'autoPlay':true
                        }]
                      }" />
    <p>
      <a tal:attributes="href string:${context/absolute_url}/@@download/video_file/${context/video_file/filename}">
        Having trouble with the video? <b>Click here to download it</b>
      </a>
    </p>
    </object>
</video>