博客

接触过video标签的人都知道，这个东西是真让人尴尬，尤其是在微信中使用，奇奇怪怪的问题尤其多，上一次的文章中，我已经介绍了一些微信中使用video中的问题了，感兴趣的可以去看一下

链接：


http://blog.csdn.net/qq_22557797/article/details/66973548

正文从这里开始

这里主要介绍自定义控制条中控制条所包含的一系列常用事件，主要是

播放/暂停 刷新 音量开关 进度条 全屏

这几个；

首先结构搭一下：

<div class="video-box" id="videoBox"><!--video 盒子-->
    <div class="video-box-body">
        <video class="video-body" id="videoBody" src="img/test.mp4">
            您的浏览器不支持video
        </video>
        <!--控制条盒子-->
        <div class="video-control" id="videoControl">
            <div class="pull-left fontzero control-leftview">
                <!--刷新键-->
                <div class="control-btn loadbtn" id="loadBtn"></div>
                <!--暂停/播放键-->
                <div class="control-btn playbtn" id="playPausebtn"></div>
            </div>
            <div class="pull-left fontzero progress-box">
                <div class="progress-box-body">
                    <!--播放时长-->
                    <div class="current-time pull-left" id="currentTime">00:00</div>
                    <div class="durationbar-box pull-left">
                        <!--总视频长度进度条-->
                        <div class="durationbar" id="durationBar">
                            <!--缓冲进度条-->
                            <div class="bufferbar" id="bufferBar"></div>
                            <!--正在播放进度条-->
                            <div class="currentbar" id="currentBar"></div>
                            <div class="drawbar" id="drawBar"></div>
                        </div>
                    </div>
                    <!--总时长-->
                    <div class="duration-time pull-left" id="durationTime">00:00</div>
                </div>
            </div>
            <div class="pull-left fontzero control-rightview">
                <!--音量键-->
                <div class="control-btn mutedbtn" id="mutedBtn"></div>
                <!--全屏键-->
                <div class="control-btn fullscreenbar" id="fullScreenBar"></div>
            </div>
        </div>
    </div>
</