Posted By

rtcrm on 07/13/09


Tagged

element html browser flash video standards compatibility html5 playback


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

zartgesotten
umang_nine
motionmediasolutions


Video For Everybody


 / Published in: HTML
 

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

Video for Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element which offers native playback in Firefox 3.5 and Safari 3 & 4.

This is native OGG video playback in Firefox 3.5 (you get H.264 playback in Safari). No plugins to install. The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.

In other browsers that do not support <video>, it falls back to Adobe Flash: You can host locally or embed any Flash file, such as a YouTube video.

If Flash is not installed, QuickTime is used which allows playback on the iPhone.

If QuickTime is not installed then Windows Media Player is used in Internet Explorer 8 for Windows 7. This means that it is actually almost impossible for the video to not play in IE8 on Windows 7. Even without Flash and QuickTime, you’d have to disable Windows Media Player or all ActiveX entirely!

Finally, if all else fails, a warning is issued that provides links to download the video, and links to software relevant to getting the video to play within the browser itself. Since this is just HTML, you can put anything here you want.

  1. <!-- first try native HTML5 video playback -->
  2. <video width="640" height="360" controls="controls" autoplay="true">
  3. <source src="__MY_VIDEO__.mp4" type="video/mp4" />
  4. <source src="__MY_VIDEO__.ogv" type="video/ogg" />
  5. <!-- fall back to Flash *do not* include 'classid' so as to be compatible with non-IE browsers -->
  6. <object width="640" height="380" type="application/x-shockwave-flash" data="__FLASH_PLAYER__.swf"
  7. flashvars="autostart=true&amp;file=__MY_VIDEO__.mp4"
  8. > <!-- IE compatibility for the above -->
  9. <param name="movie" value="__FLASH_PLAYER__.swf" />
  10. <param name="flashvars" value="autostart=true&amp;file=__MY_VIDEO__.mp4" />
  11. <!-- no Flash? fall back to a QuickTime object iPhone OSv2 will use this file. ensure your MP4 is compatible: <tinyurl.com/qmmss6> IE6 does not allow object-within-object, Flash is the only option. this object tag (with classid) is hidden from non-IE browsers, as it causes a plugin-install prompt to occur even if the plugin is not needed because it's been superseded by HTML5 video -->
  12. <!--[if gt IE 6]>
  13. <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
  14. <param name="src" value="__MY_VIDEO__.mp4" />
  15. <param name="autoplay" value="true" /><!
  16. [endif]--><!-- the odd line-break above is *required* or QuickTime fallback fails -->
  17. <!--[if gt IE 6]><!-->
  18. <!-- that self-closing comment after the conditional tag is the only way to reveal the conditional comment to other browsers that is compatible with serving as XHTML (application/xhtml+xml). a normal closing comment marker would be visible in IE7, and other workarounds cause an XML parser error (comment-in-comment) -->
  19. <!-- QuickTime height is height+15 to leave room for the controls -->
  20. <object width="640" height="375" autoplay="true"
  21. type="video/quicktime" data="__MY_VIDEO__.mp4"
  22. > <!-- params for Safari/Chrome compatibility (they ignore the attributes above) -->
  23. <param name="src" value="__MY_VIDEO__.mp4" />
  24. <param name="autoplay" value="true" />
  25. <!--<![endif]-->
  26. <!-- finally, if all else fails, fall back to a warning message: *always* tell the user *what* it is they can't see; give a title or description -->
  27. <h3>Video: __TITLE_OF_MY_VIDEO__</h3>
  28. <p>
  29. <strong>No video playback capabilities detected.</strong>
  30. Why not try to download the file instead?<br />
  31. <a href="__MY_VIDEO__.mp4">MPEG4 / H.264 .mp4
  32. (Windows / Mac)</a> |
  33. <a href="__MY_VIDEO__.ogv">Ogg Theora &amp; Vorbis .ogv
  34. (Linux)</a>
  35. </p>
  36. <!-- and try to give them genuinely helpful information to rectify the problem -->
  37. <p>
  38. To play the video here in the webpage, please do one of the following:
  39. </p><ul>
  40. <li>Upgrade to the latest version of <a href="http://getfirefox.com">Firefox</a>,
  41. or <a href="http://apple.com/safari">Safari</a></li>
  42. <li>Install <a href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a></li>
  43. <li>Install <a href="http://apple.com/quicktime/download/">Apple QuickTime</a></li>
  44. </ul>
  45. <!--[if gt IE 6]><!--></object><!--<![endif]-->
  46. <!--[if gt IE 6]></object><![endif]-->
  47. </object>
  48. </video>

Report this snippet  

You need to login to post a comment.