应用html5自定义实现播放器代码分享-
发布时间：08/01 来源：未知 浏览：
关键词：
本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。
结果预览
点我查看 源码仓库 。
中心思绪
我信赖一定会有些没有接触过制作自定义播放器的童鞋关于 标签的相识会停顿在此。
其中controls属性经过设置，会在界面中显示一个阅读器自带的控制条。要是关于UI没有请求的需求，其内置控制器已经可以知足大局部的需求。固然了要是是这样你们也不会看到这篇分享了=。=
隐蔽控制条并模拟
那么实现一个自定义功能的播放器关键就在于，我们不运用原生的控制器，将其隐蔽掉之后，鄙人方一样的位置通过html、css来模拟所需样式，同时通过js来调取vedio标签所透露给我们的接口函数及属性，以及检测会员的操纵行为来同步的模拟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自定义实现播放器代码分享的细致内容，更多请关注 百分百源码网 其它相干文章！
