从零开始实现自定义html5播放器

写在最上面这个分享是基于HTML5标签的自定义视频播放器。其中，实现了播放暂停、进度拖动、音量控制、全屏等功能。欢迎关注我的博客，不定时更新-请看这个地址https://user-gold-cdn.xitu.io...点我查看源码仓库。核心思想，相信一些没有接触过制作自定义播放器的童鞋，对于标签的理解会停留在这里。这里设置了controls属性，会在界面中显示一个浏览器自带控制条。如果对UI没有要求，其内置的控制器已经可以满足大部分需求。当然，如果是这样的话，你是不会看到这个分享的=。=隐藏控制栏并模拟实现一个自定义功能播放器的关键是我们不使用原生控制器，隐藏之后，在下方同一位置通过html和css模拟出想要的样式，同时通过js调用vedio标签暴露给我们的接口函数和属性，通过检测用户的操作行为来同步模拟UI和视频播放数据的相应变化。几个核心函数和属性的使用myVid=document.getElementById("video1");//控制视频切换myVid.play()//播放myVid.pause()//暂停//模拟视频进度条myVid.currentTime=5;//返回或设置当前视频播放位置myVid.duration//返回视频总时长//模拟视频音量myVid.volume//音量//获取视频当前状态，判断何时从加载切换播放myVid.readyState//0=HAVE_NOTHING-没有有关音频/视频就绪的信息//1=HAVE_METADATA-有关音频/视频的元数据就绪//2=HAVE_CURRENT_DATA-有关当前播放位置的数据可用，但没有足够的数据播放下一帧/毫秒//3=HAVE_FUTURE_DATA-当前和至少下一帧的数据可用//4=HAVE_ENOUGH_DATA-可用数据足以在所有实现中开始播放关键点，对于进度条模拟来说更乏味。使用了video标签中的currentTime和duration属性，进度条相对于总长度的位置可以通过当前播放时间占总播放时间的比例来计算。同时，用户通过拖动进度条最终设置的长度也可以用来反推此时应该播放视频的位置。拖拽代码思路//核心代码示例vardragDis=0varprocessWidth=xxx//拖拽条总长度$('body').mousedown(function(e){startX=e.clientXdragDis=startX-leftInit//leftInit是拖动条起点到屏幕左侧的距离dragTarget.css({//拖动按钮左：dragDis})dragProcess.css({//进度条（蓝色进度条）宽度:dragDis})//让进度条和拖动按钮在同一个位置渲染videoSource.pause()}).mousemove(function(e){moveX=e.clientXdisX=moveX-startXvarleft=dragDis+disXif(left>processWidth){left=processWidth}elseif(left<0){left=0}dragTarget.css({left:left})dragProcess.css({width:left})}).mouseup(function(e){videoSource.play()videoSource.currentTime=$('bluedragbar').width()/processWidth*duration//计算拖动后视频的正确播放位置})同样，音量控制是和上面的行为基本一致，所以在源码中，作者将音量和进度部分使用不同的元素来判断是拖放进度还是音量。通过查询视频流的状态来控制播放前的加载动画'.play-sym-wrapper').remove()$('body').append('