Posted By

marcio on 02/19/10


Tagged

html flash video quicktime markup MP4 html5 ogg


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

nerdfiles
kubaitis


Crossbrowser video embedding


 / Published in: HTML
 

URL: http://camendesign.com/code/video_for_everybody

  1. <!-- "Video For Everybody" v0.3.2
  2. =================================================================================================================== -->
  3. <!-- first try HTML5 playback. if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
  4. <video width="640" height="360" poster="__POSTER__.JPG" controls>
  5. <!-- you must use `</source>` to avoid a closure bug in Firefox 3 / Camino 2! -->
  6. <source src="__VIDEO__.OGV" type="video/ogg"></source><!-- Firefox native OGG video -->
  7. <source src="__VIDEO__.MP4" type="video/mp4"></source><!-- Safari / iPhone video -->
  8. <!-- IE only QuickTime embed: IE6 is ignored as it does not support `<object>` in `<object>` so we skip QuickTime
  9. and go straight to Flash further down. the line break after the `classid` is required due to a bug in IE -->
  10. <!--[if gt IE 6]>
  11. <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
  12. [endif]-->
  13. <!-- non-IE QuickTime embed (hidden from IE): the self-closing comment tag allows non-IE browsers to
  14. see the HTML whilst being compatible with serving as XML -->
  15. <!--[if !IE]><!-->
  16. <object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4">
  17. <!--<![endif]-->
  18. <param name="src" value="__VIDEO__.MP4" />
  19. <param name="showlogo" value="false" />
  20. <param name="autoplay" value="false" />
  21. <!-- fallback to Flash -->
  22. <object width="640" height="384" type="application/x-shockwave-flash"
  23. data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4">
  24. <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
  25. <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
  26. <!-- fallback image. download links are below the video. warning: putting anything more than
  27. the fallback image in the fallback may trigger an iPhone OS3+ bug where the video will not play -->
  28. <img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__"
  29. title="No video playback capabilities, please download the video below"
  30. />
  31. </object><!--[if gt IE 6]><!-->
  32. </object><!--<![endif]-->
  33. </video>
  34. <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
  35. <p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: marcio on February 23, 2010

Video for everybody!

You need to login to post a comment.