接触过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>
</