Advanced Search

Video for Everybody 0.3 (HTML 5)

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

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

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.