从零实现一个自定义html5播放器

张迁发布于2019-08-21 18:39 / 405人阅读

摘要：写在最前本次的分享是一个基于标签实现的一个自定义视频播放器。其中实现了播放暂停进度拖拽音量控制及全屏等功能。核心思路我相信一定会有些没有接触过制作自定义播放器的童鞋对于标签的认识会停留在此。整个视频播放器的基础功能实现的还算完善。

写在最前

本次的分享是一个基于HTML5标签实现的一个自定义视频播放器。其中实现了播放暂停、进度拖拽、音量控制及全屏等功能。
欢迎关注我的博客，不定期更新中——

效果预览

画面卡顿请看这个地址
https://user-gold-cdn.xitu.io...
点我查看源码仓库。

核心思路

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

其中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)

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

最后

惯例po作者的博客，不定时更新中——
有问题欢迎在issues下交流。

云服务器 GPU云服务器自定义一个类型实现自定义手势自定义如何实现自定义布局怎么实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90677.html

Day11 - 自定义视频播放器

摘要：自定义视频播放器微信公众号开发企业级产品全栈开发速成周末班首期班号正式开班，欢迎抢座作者简介是推出的一个天挑战。 Day11 - 自定义视频播放器 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视...

SKYZACK 2019-08-20 18:26 评论0 收藏0
2017-07-20 前端日报

摘要：前端日报精选入门指南工作原理的新功能前端本地存储数据库实例教程模块深入探究调查问卷中文译掘金第期构建高性能展开收缩动画译代码检查工具对比前端之旅译年了，这么多前端框架，你会怎样选择掘金译不配置，不出事那些坑其一前端面试的大 2017-07-20 前端日报精选 CSS入门指南-1：工作原理2017 Amsterdam CSS DayWebpack 3 的新功能：Scope Hoisti...

JessYanCoding 2019-08-20 18:10 评论0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。背景为什么要编写 larkplayer？（注意，这里面有...

lijy91 2019-08-02 16:05 评论0 收藏0