advanced code snippet search

Posted By

rtcrm on 05/10/11


Tagged

html flash video html5


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

therise03


HTML5 Video: Simple Embed

 / Published in: HTML
 
  • HTML5 video displayed for those browsers that support it.
  • Falls back to Flash video for non-HTML5 browsers (below IE9).
  • Placeholder image displays for non-HTML5 and non-Flash browsers.
  • Does not rely on JS.
  • Does not include download links.
  • If using "ClearOverAll.swf" for Flash controls, make sure it lives on same level as the HTML page! (Otherwise, the controls won't appear.)
  • Make sure MIME types are on the server hosting the HTML5 video files! (Add to cpanel, not the .htaccess file.)
Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>HTML5 Video Demo</title>
  5. </head>
  6. <body>
  7. <div style="width: 667px; margin: 0 auto;">
  8. 	<video width="667" height="375" controls>
  9. 		<source src="FILE_NAME.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  10. 		<source src="FILE_NAME.ogv"  type="video/ogg" />
  11. 		<object width="667" height="375" type="application/x-shockwave-flash" data="FILE_NAME.swf">
  12. 			<param name="movie" value="FILE_NAME.swf" />
  13. 			<param name="flashvars" value="controlbar=over&amp;image=PLACEHOLDER_FILE_NAME.jpg&amp;file=FILE_NAME.mp4" />
  14. 			<img src="PLACEHOLDER_FILE_NAME.jpg" width="250" height="152" alt="ALT_HERE" title="TITLE_HERE" />
  15. 		</object>
  16. 	</video>
  17. </div>
  18. </body>
  19. </html>

Report this snippet  

You need to login to post a comment.