本文主要介绍从零开始实现自定义html5播放器的示例代码。 小编觉得还是不错的。 现在我就分享给大家，给大家一个参考，快跟着我来看看吧
本次分享是一个基于HTML5标签实现的自定义视频播放器。 其中实现了播放暂停、进度拖放、音量控制、全屏等功能。
效果预览
点我查看源码库。
核心理念
相信一些从未接触过制作定制播放器的童鞋，对于标签的理解会停留在这里。
其中，设置了controls属性，界面中就会显示浏览器自带的控制栏。 如果对UI没有要求，其外部控制器已经可以满足大部分要求。 当然，这样的话大家就看不到这个分享了=。 =
隐藏控制栏并模拟
那么实现一个具有自定义功能的播放器的关键就是我们不使用原来的控制器。 隐藏之后，我们在下面相同位置通过html和css模拟需要的样式html5 播放器 代码，同时使用js调用vedio标签。 暴露给我们的socket函数和属性，以及检查用户的操作行为以同步模拟UI和视频播放数据的相应变化。
几个核心功能和属性的使用
myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid.currentTime=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.readyState
//0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
所有实现的关键点是进度条的模拟。 利用video标签中的currentTime和duration属性，可以通过当前播放时间与总播放时间的比值来估计进度条相对于总长度的位置。 同时，还可以利用用户上次通过拖拽进度条设置的宽度来反向估计此时视频应该播放的位置。
拖放代码创意
//核心代码示例
var dragDis = 0
var processWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
startX = e.clientX
dragDis = startX - leftInit //leftInit为拖拽条起始点巨屏幕左侧的距离
dragTarget.css({ //拖拽按钮
left: dragDis
})
dragProcess.css({ //进度条(蓝色进度条)
width: dragDis
}) // 令进度条和拖拽按钮渲染在同一位置
videoSource.pause()
}).mousemove(function(e) {
moveX = e.clientX
disX = moveX - startX
var left = dragDis + disX
if(left > processWidth) {
left = processWidth
} else if(left < 0) {
left = 0
}
dragTarget.css({
left: left
})
dragProcess.css({
width: left
})
}).mouseup(function(e) {
videoSource.play()
videoSource.currentTime = $('蓝色拖拽条').width() / processWidth * duration //拖拽后计算视频的正确播放位置
})
同样，音量控制与上面的行为基本相同，所以在源码中，作者通过拖放音量和进度的方式，使用不同的元素来确定是控制进度还是控制音量。
通过查询视频流状态控制播放前加载动画
function ifState() {
var state = videoSource.readyState
if(state === 4) { //状态为4即可播放
videoPlayer()
} else {
$('.play-sym-wrapper').remove()
$('body').append('')
//添加loading动画
setTimeout(ifState, 10)
}
}
setTimeout(ifState, 10)
核心控制部分已经完成。 有兴趣的朋友可以去源码的html点击播放。 有很多碎片化的需求html5 播放器 代码，比如点击暂停、保存音量等等。 整个视频播放器的基本功能已经相当完善。
