扣丁学堂HTML5视频教程之如何从零实现一个自己设置HTML5播放器

本篇文章小编给大家分享少量干货，喜欢HTML5开发的小伙伴可以随小编来看一下本章的分享：如何从零实现一个自己设置HTML5播放器，对于如何从零实现一个自己设置HTML5播放器这个问题，喜欢HTML5开发的小伙伴应该不会陌生，但是具体应该怎样操作也许还有少量小伙伴不是很清楚，下面就随扣丁学堂小编一起来看一下吧。

扣丁学堂HTML5视频教程

本次的分享是一个基于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)

核心的控制部分已经说完了，其中被迫有很多零碎的需求，比方点击暂停，保存音量等等。整个视频播放器的基础功能实现的还算完善。

以上就是扣丁学堂HTML5在线学习小编给大家分享的从零实现一个自己设置HTML5播放器的示例代码，希望对小伙伴们有所帮助，想要理解更多内容的小伙伴可以登录扣丁学堂官网咨询。