Posted By

LeeRJohnson on 01/10/10


Tagged

video audio media markup html5 Delivery video-player video-fallback


Versions (?)

Who likes this?

9 people have marked this snippet as a favorite

nerdfiles
andy2577
LeeRJohnson
motionmediasolutions
craftymethod
michellebracken
SpinZ
clac
clacwebstudio


Youtube HTML5 Video Player Markup


 / Published in: HTML
 

URL: http://www.youtube.com/html5

I think that is some of the best markup I have seen ever from Google.

  1. <div id="video-player">
  2. <video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
  3. <div class="video-fallback">
  4. <br>You must have an HTML5 capable browser.
  5. </div>
  6. </video>
  7. <div class="controls">
  8. <button class="play-button"></button>
  9. <div class="progress-bar">
  10. <div class="progress-list">
  11. <progress class="load-progress" value="0" style="width: 0%;"></progress>
  12. <progress class="play-progress" value="0" style="width: 0%;"></progress>
  13. <!-- I do not like using a transparent gif, but have not figured out how to prevent the image from dragging - czacharias -->
  14. <a href="#" class="scrubber-button" style="left: 0%;"><img src="/demo/transp.gif" width="16" height="16"></a>
  15. </div>
  16. <span class="progress-text"><time class="current-time">00:00</time> / <time class="duration-time">00:00</time></span>
  17. </div>
  18. <button class="volume-button" value="max">
  19. <div class="volume-panel">
  20. <div class="volume-channel">
  21. <a href="#" class="volume-slider" style="top: 0%;"><img src="/demo/transp.gif" width="20" height="10"></a>
  22. </div>
  23. </div>
  24. </button>
  25. <button class="hd-button" value="on"></button>
  26. <button class="fullscreen-button"></button>
  27. <button class="menu-button"></button>
  28. </div>
  29. <div class="stats">
  30. <meter class="rating-stars"></meter>
  31. <span class="rating-count">158 ratings</span>
  32. <span class="view-count"><strong>311,916</strong> views</span>
  33. </div>
  34. </div>

Report this snippet  

You need to login to post a comment.