本篇文章主要介绍了从零实现一个自定义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 = 0var 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 同理音量的控制与其上行为基本一致，故在源码中作者将音量与进度部分通过不同元素进行判断是进行进度还是音量的拖拽控制。
通过查询视频流状态控制播放前的加载动画
function ifState() { var state = videoSource.readyState if(state === 4) { //状态为4即可播放 videoPlayer() } else { $('.play-sym-wrapper').remove() $('body').append('![利用html5自定义实现播放器代码分享]()
![利用html5自定义实现播放器代码分享]()
') //添加loading动画 setTimeout(ifState, 10) }}setTimeout(ifState, 10)
登录后复制
核心的控制部分已经说完了，有兴趣的同学可以去源码的html中点击播放，其中被迫有很多零碎的需求，比如点击暂停，保存音量等等。整个视频播放器的基础功能实现的还算完善。
以上就是利用html5自定义实现播放器代码分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2909944.html
