Posted By

bcmoney on 02/20/12


Tagged

flash video download html5 Silverlight


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Priestd09


HTML5 Mobile Video with Flash, Silverlight, Java, Animated GIF and Download fallback


 / Published in: HTML
 

URL: http://bcmoney-mobiletv.com/blog/2010/09/22/html5-with-animated-gif/

Due to device capability inconsistencies and fragmentation, in order to play on the broadest range of devices, approximately 6 formats would be required:

  • Flash - VP6 (IE 4-6, Netscape, some tablets/PDAs, legacy Desktop browsers)
  • Silverlight - WMV (IE7+, Windows Phone)
  • HTML5 video - Ogg Theora (FF, Fenick, Opera, Opera Mobile)
  • HTML5 video - WebM VP8 (Chrome, Android phones/tablets)
  • HTML5 video or Java Applet - MP4 baseline H.264 (Safari, iOS devices: iPad/iPod/iPhone, J2SE/J2ME devices)
  • Mobile video - 3GP via RTSP or HTTP (Blackberry, Nokia, Motorola and other legacy Mobile devices)

Optionally... an animated GIF can be used for frame playback with no audio, not a great experience but works fine as long as text transcripts are available to accompany. Not really a serious way to transfer video though, just a desperate fallback (and was once upon a time the only way to simulate video on a phone).

By my heinously imprecise math, the right combination of these should reach about 90% of internet users (2B) and 50% of mobile devices with video and/or internet capabilities (0.8B), which would be 2.8 Billion people.

REFERENCES

Internet Stats: http://www.internetworldstats.com/stats.htm

Mobile Stats: http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats#mobilebroadband

DiveIntoHTML5 - VIDEO: http://diveintohtml5.info/video.html

JW Player Wizard: http://www.longtailvideo.com/support/jw-player-setup-wizard

Detect via javascript whether Silverlight is installed: http://stackoverflow.com/questions/119980/detect-via-javascript-whether-silverlight-is-installed

Akamai's "should play EVERYWHERE" Mobile video demo: http://tinyurl.com/showmethebunny

Cortado player on Theora: http://www.theora.org/cortado/

NOTE: Omitting "poster" attribute of HTML5 tag lets us also reach those few iOS users who haven't upgraded from iOS3 versions, which had a player bug with poster was used.

NOTE2: Likewise, turning off autoplay on all the players has two purposes, firstly we will only stream when we are sure the user wants to watch the video, secondly it avoids multiple players starting automatically on page load (which would require alot of obtrusive Javsacript and player juggling to prevent from happening).

  1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>HTML5 Video with Flash and Download fallback</title>
  4. <!--[if lt IE 9]>
  5. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  6. <![endif]-->
  7. <style type="text/css">
  8. header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
  9. img { border:0; vertical-align:middle; }
  10. </style>
  11. </head>
  12. <div id="movie">
  13. <video id="movie_html5" width="320" height="240" preload controls>
  14. <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
  15. <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
  16. <source src="video.mp4" />
  17. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="movie_object" name="movie_object" width="320" height="240" type="application/x-shockwave-flash" data="player.swf">
  18. <param name="movie" value="player.swf" />
  19. <param name="wmode" value="transparent" />
  20. <param name="allowfullscreen" value="true" />
  21. <param name="allowscriptaccess" value="always" />
  22. <param name="flashvars" value="file=video.flv&image=video.jpg" />
  23. <embed type="application/x-shockwave-flash" id="movie_embed" name="movie_embed"
  24. src="player.swf"
  25. width="320"
  26. height="240"
  27. bgcolor="#000000"
  28. allowscriptaccess="always"
  29. allowfullscreen="true"
  30. wmode="transparent"
  31. flashvars="file=video.flv&image=video.jpg">
  32. <noembed>
  33. <!-- Java Applet OGG player, see: http://git.xiph.org/?p=cortado.git;a=blob;f=README -->
  34. <applet id="movie_java" name="movie_java" code="com.fluendo.player.Cortado.class" archive="http://theora.org/cortado.jar" width="320" height="240">
  35. <param name="url" value="video.ogv" />
  36. <param name="autoPlay" value="false" />
  37. <!-- Mobile stream (Image can be an Animated GIF for playback with no sound) -->
  38. <div id="movie_mobile">
  39. <a href="video.3gp"><img alt="PLAY" src="video.gif" width="320" height="240" /></a>
  40. </div>
  41. </applet>
  42. </noembed>
  43. </embed>
  44. </object>
  45. <!-- JW Silverlight WMV player -->
  46. <div id="movie_silverlight" name="movie_silverlight" style="display:none; position:relative; top:8px; left:8px;">&nbsp;</div>
  47. <script type="text/javascript" src="silverlight.js"></script>
  48. <script type="text/javascript" src="wmvplayer.js"></script>
  49. <script type="text/javascript">
  50. var hasSilverlight = Boolean(window.Silverlight);
  51. if (hasSilverlight) {
  52. var cnt = document.getElementById("movie_silverlight"); //media container
  53. cnt.style.display = 'block'; //show Silverlight
  54. document.getElementById("movie_object").style.display='none'; //hide Flash, Java and Mobile
  55. var xaml = "wmvplayer.xaml"; //XAML player
  56. var cfg = { file:"video.wmv", image:"video.jpg", width:"320", height:"240" }; //configure WMV file, preview thumbnail, width/height
  57. var ply = new jeroenwijering.Player(cnt, xaml, cfg);
  58. }
  59. </script>
  60. </video>
  61. <!-- Offer direct download link to play in Browser plugin or allow System default Media Player to take over -->
  62. <p>
  63. Download: <a href="video.mp4">MP4</a> | <a href="video.webm">WebM</a> | <a href="video.ogv">Ogg</a> | <a href="video.3gp">3gp</a> | <a href="video.flv">Flash</a> | <a href="video.wmv">WMV</a>
  64. </p>
  65. </div>
  66. </body>
  67. </html>

Report this snippet  

You need to login to post a comment.