从零实现一个自定义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 相关文章推荐
纯CSS3实现质感细腻丝滑按钮
Mar 09 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
Mar 18 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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
php分页函数完整实例代码
2014/09/22 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
详解php命令注入攻击
2019/04/06 PHP
JavaScript的Function详细
2006/11/14 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
实习护士自我鉴定
2013/10/13 职场文书
应聘医药代表职位求职信
2013/10/21 职场文书
升学宴演讲稿
2014/09/01 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python