从零实现一个自定义html5播放器的示例代码


Posted in HTML / CSS onAugust 01, 2017

本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。

效果预览

从零实现一个自定义html5播放器的示例代码

点我查看 源码仓库 。

核心思路

我相信一定会有些没有接触过制作自定义播放器的童鞋对于 标签的认识会停留在此。

<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 = 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('<div class="play-sym-wrapper"><img class="play-sym" src="./images/loading.gif"></div>')
        //添加loading动画
        setTimeout(ifState, 10)
    }
}
setTimeout(ifState, 10)

核心的控制部分已经说完了,有兴趣的同学可以去源码的html中点击播放,其中被迫有很多零碎的需求,比如点击暂停,保存音量等等。整个视频播放器的基础功能实现的还算完善。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
HTML5 本地存储 LocalStorage详解
Jun 24 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 #HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 #HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 #HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 #HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 #HTML / CSS
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
消息持续发送的完整例子
2006/10/09 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
美国最大的团购网站:Groupon
2016/07/23 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
益模软件Java笔试题
2012/03/27 面试题
自我鉴定思想方面
2013/10/07 职场文书
干部培训自我鉴定
2014/01/22 职场文书
一句话工作感言
2014/03/01 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
企业务虚会发言材料
2014/10/20 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
委托书英文
2015/01/28 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
高考升学宴主持词
2019/06/21 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技