Posted By

bassdas on 01/22/11


Tagged

crossbrowser video embedded html5


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

bassdas
buddharage
maltem


HTML5 Embedded Crossbrowser Video


 / Published in: HTML
 

  1. <!-- 1) without Video Poster Image : -->
  2. <video id='promovideo' class='video' width='640' height='480' controls='controls' preload='load' autoplay='autoplay' loop='loop'>
  3. <!-- 2) Video Poster Image doesnt works with IOS3.0, but if its needed: -->
  4. <video poster='image.jpg' id='promovideo' class='video' width='640' height='480' controls='controls' preload='load' autoplay='autoplay' loop='loop'>
  5.  
  6. <source src='video.mp4' type='video/mp4' />
  7. <source src='video.webm' type='video/webm' />
  8. <source src='video.ogv' type='video/ogg' />
  9.  
  10. <!-- Flash Fallback. Use any flash video player here. -->
  11. <object class='flash-fallback' width='640' height='480' type='application/x-shockwave-flash' data='http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf'>
  12. <param name='movie' value='http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf' />
  13. <param name='allowfullscreen' value='true' />
  14. <param name='wmode' value='transparent' />
  15. <param name='loop' value='true' />
  16. <param name='flashvars' value="config={'playlist':[{'url': 'http://www.domain.ch/video.mp4','autoPlay':false,'autoBuffering':true}]}" />
  17. <!-- Image Fallback. Typically the same as the poster image. -->
  18. <img src='image.jpg' width='640' height='480' alt='video' title='No video playback capabilities.' />
  19. </object>
  20. </video>

Report this snippet  

You need to login to post a comment.