本次的分享是一个基于HT ML 5标签实现的一个自定义视频播放器。其中实现了播放 暂停 、 进度 拖拽、 音量 控制及全屏等功能。
效果预览
点我查看 源码仓库 。
核心思路
我相信一定会有些没有接触过 制作 自定义播放器的童鞋对于 标签的认识会停留在此。
<video controls="controls" auto play ="autoplay"> <source src=" ;m ovie.ogg" ty PE ="video/ogg" /> </video>
其中controls属性经过设定，会在界面中显示一个浏览器 自带 的控制条。如果对于UI没有要求的需求，其内置控制器已经可以满足大部分的需求。当然了如果是这样 你们 也不会看到这篇分享了=。=
隐藏控制条并模拟
那么实现一个自定义功能的播放器关键就在于，我们不使用原生的控制器，将其隐藏掉之后，在下方同样的位置通过html、css来模拟所需样式，同时通过js来调用vedio标签所暴露给我们的接口函数及属性，以及检测用户的操作行为来同步的模拟UI与视频播放数据的相应变化。
几个核心函数及属性的用法
myVid=document.getElementById("video1");
//控制视频开关
myVid.play() //播放
myVid.pause() //暂停
//模拟视频进度条
myVid. current Time=5; //返回或设定当前视频播放位置
myVid.duration // 返回视频总长度
//模拟视频音量
myVid.volume //音量
//获取视频当前状态后判断何时从loading切换为播放
myVid.ready stat e
//0 = HAVE_NOTHING - 没有关于音频/视频 是否 就绪的信息
//1 = HAVE_METADATA - 关于音频/视频就绪的元数据
//2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
//3 = HAVE_ Future _DATA - 当前及至少下一帧的数据是可用的
//4 = HAVE_ENOUGH_DATA - 可用数据足以 开始 播放
在所有实现中的 关键点 ，较为繁琐的是对于进度条的模拟。其中使用了 video标签 中的currentTime以及duration属性，通过当前播放时间与总播放时间的比值，就可以计算出进度条相对于总长的位置。同时用户通过拖拽进度条所最后设置的长度也可以用来反向推算出此时视频 应该 播放的位置。
拖拽代码思路
//核心代码示例
VAR Drag Dis = 0
var PR ocessWidth = xxx //拖拽条总长
$('body').mousedown(function(e) {
startX = e.clientX
dragDis = startX - leftIn IT //leftInit为拖拽条起始点巨屏幕左侧的 距离
dragT arg et.css({ //拖拽按钮
left: dragDis
})
dragProcess.css({ //进度条(蓝色进度条)
width: dragDis
}) // 令进度条和拖拽按钮渲染在同一位置
videoSource.pause()
}).mou SEM ove(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即可播放
video player ()
} else {
$('.play -s ym-wrapper').remove()
$('body').append('<div class="play-sym-wrapper">< img class="play-sym" src="./images/loading.gif"></div>')
//添加loading动画
setTimeout(ifState, 10)
}
}
setTimeout(ifState, 10)
核心的控制部分已经说完了，有兴趣的 同学 可以去源码的html中点击播放，其中被迫有很多零碎的需求，比如点击暂停，保存音量 等等 。整个视频播放器的基础功能实现的还算完善。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 从零实现一个自定义html5播放器的示例代码 全部内容，希望文章能够帮你解决 从零实现一个自定义html5播放器的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于从零实现一个自定义html5播放器的示例代码的详细内容...