youtube使用的HTML5 视频播放器
<div id="video-player"> <video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer> <div class="video-fallback"> <br>You must have an HTML5 capable browser. </div> </video> <div class="controls"> <button class="play-button"></button> <div class="progress-bar"> <div class="progress-list"> <progress class="load-progress" value="0" style="width: 0%;"></progress> <progress class="play-progress" value="0" style="width: 0%;"></progress> <!-- I do not like using a transparent gif, but have not figured out how to prevent the image from dragging - czacharias --> <a href="#" class="scrubber-button" style="left: 0%;"><img src="/demo/transp.gif" width="16" height="16"></a> </div> <span class="progress-text"><time class="current-time">00:00</time> / <time class="duration-time">00:00</time></span> </div> <button class="volume-button" value="max"> <div class="volume-panel"> <div class="volume-channel"> <a href="#" class="volume-slider" style="top: 0%;"><img src="/demo/transp.gif" width="20" height="10"></a> </div> </div> </button> <button class="hd-button" value="on"></button> <button class="fullscreen-button"></button> <button class="menu-button"></button> </div> <div class="stats"> <meter class="rating-stars"></meter> <span class="rating-count">158 ratings</span> <span class="view-count"><strong>311,916</strong> views</span> </div> </div>