返回顶部

收藏

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>

标签:html5,video,youtube

收藏

0人收藏

支持

0

反对

0

发表评论