从零实现一个自定义html5播放器
来源:互联网 发布:淘宝领卷公众号 编辑:程序博客网 时间:2024/05/17 01:27
写在最前
本次的分享是一个基于HTML5<vedio>标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。
欢迎关注我的博客,不定期更新中——
效果预览
点我查看源码仓库。
核心思路
我相信一定会有些没有接触过制作自定义播放器的童鞋对于<vedio>标签的认识会停留在此。
<video controls="controls" autoplay="autoplay"> <source src="movie.ogg" type="video/ogg" /></video>
其中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 < 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('<div class="play-sym-wrapper">![](./images/loading.gif)</div>') //添加loading动画 setTimeout(ifState, 10) }}setTimeout(ifState, 10)
核心的控制部分已经说完了,有兴趣的同学可以去源码的html中点击播放,其中被迫有很多零碎的需求,比如点击暂停,保存音量等等。整个视频播放器的基础功能实现的还算完善。
最后
惯例po作者的博客,不定时更新中——
有问题欢迎在issues下交流,捂脸求star=。=
阅读全文
0 0
- 从零实现一个自定义html5播放器
- html5 自定义播放器
- 自定义HTML5播放器
- 自定义HTML5 audio 播放器
- html5 audio 自定义播放器
- JS实现HTML5音频播放自定义UI
- 一个不错的html5播放器
- 一个有趣的html5播放器
- HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器
- 分享一个老式卡带机风格的HTML5 Audio播放器实现
- 从零实现一个跨平台的静态网页服务器
- 从零实现一个最精简的select网络服务模型
- HTML5实现视频播放
- HTML5实现音频播放
- HTML5 Audio自定义播放控制
- 用HTML5实现音乐播放器和视频播放器
- 从零学会自定义控件
- 5.HTML5 音频和视频-2 (自定义播放器)
- 基于react的影院购票应用
- Javascript之bind
- 基于 node 的微小爬虫——扒了一下知乎
- 从Console中看看jQuery的原型链
- 基于node的微小服务——细说缓存与304
- 从零实现一个自定义html5播放器
- 基于jQuery的一个“射日”小游戏
- 基于canvas实现波浪式绘制图片
- Android杂记-混淆
- 从HTML5与PromiseA+规范来看事件循环
- 从[] == ![] 看隐式强制转换机制
- 给文档添加一组掘金的「小盾牌」
- 从hello world看JavaScript隐藏的黑魔法
- V8中一个微妙的内存泄露方式