dp-videoplayer
Lidppp
这个作者很懒,什么都没留下…
展开
-
从0开始写一个播放器系列-控制条类实现
控制条类实现在控制条类中需要实现基本的播放器功能播放/暂停显示当前播放时间:总时长播放速度控制调整音量小窗播放网页全屏(document层级)全屏播放(window层级)进度条切换下一P选集选择清晰度这里说一下, 我在开发最初一直很纠结怎么能在开发过程中解析出来传入的是否为[{}]格式,怎么能一路平川得完成进度条开发最开始不要想那么复杂,就以默认传入的是字符串格式的url进行解析先动手,后面的事情就迎刃而解了控制条应该存入的原创 2020-09-12 11:45:02 · 692 阅读 · 0 评论 -
从0开始写一个播放器系列-核心类实现
核心类实现提示: 谷歌浏览器中canvas的drawImage方法有限制,不支持跨域操作,所以video文件必须是本域名下的,emmm好像有点废柴的样子核心类中主要实现的是创建弹幕, 创建标题, 创建控制条, video的渲染等核心操作所需要用到弹幕类,控制条类,标题类以及基本数据类型,工具类几个文件我在写这篇博客的时候还没有完成弹幕类和标题类的实现,所以写到弹幕类和标题类这两篇博客时会提及在核心类中加减的代码核心类中所需要实现的功能在传入的父元素中创建 video标签, 中转canva原创 2020-09-12 11:44:05 · 405 阅读 · 0 评论 -
从0开始写一个播放器系列-数据格式定义以及工具类
数据格式定义工欲善其事必先利其器, 定义一套数据格式有助于理顺思路, 所以开始编写代码第一步应该先定义一套数据格式回顾一下设想的调用方式 new dpVideo(parentDom,urlList,options)parentDom为外层盒子urlList 为video的srcoptions 为配置项这里的urlList格式和options需要设计数据格式首先说一下urlList的数据格式吧urlList数据格式允许用户传入字符串 , 数组两种形式的数据设想中需要拥有切换下一P, 选择清原创 2020-09-12 11:43:20 · 339 阅读 · 0 评论 -
从0开始写一个播放器系列-开发环境搭建
开发环境搭建开发自己的库,搭建一个开发环境是必不可少的我们需要一个编译TS,css压缩和兼容性处理的打包工具, 以及一个可以进行热编译的开发环境因为工作中使用webpack比较多一点, 也相对熟一点就选webpack了webpack搭建创建文件夹, 打开cmd命令行工具,cd到刚才创建的文件夹下执行下方命令npm init -ynpm i webpack webpack-cli webpack-dev-server -g等待执行的过程中在根目录中创建webpack.config.js写入原创 2020-09-11 20:46:25 · 347 阅读 · 0 评论 -
从0开始写一个播放器系列-数据格式篇
从0开始写一个播放器系列-数据格式篇设计所需要的数据格式本片文章补充一下所需要得到数据格式首先需要确定一下调用的方式因为使用typescript开发,对class的支持度比较高, 所以使用new调用new dpVideo(parentDom,urlList,options)解释一下parentDom 传入外层包裹的html元素,注意只要dom节点元素,不需要选择器(考虑到适配react和vue)urlList, 数据格式如下// 格式进行修改 :// 格式1: "http://asda原创 2020-09-11 20:29:59 · 501 阅读 · 0 评论 -
从0开始写一个播放器系列-开篇
从0开始写一个播放器系列-写一个videoPlayer-开篇阅读本系列博客所需要具备的知识: js, ts , canvas Api , DOM, webpack, 不懂也没有太大的关系, 我会捎带着写出来, 剩下的自行百度第一步,梳理所需要的功能以及收集实现方案首先需要确定需求既然想要做一个播放器,首先应该具有播放器基本的功能,播放/暂停下一个(如果传入的播放地址为数组)选择清晰度倍速播放音量画中画宽屏网页全屏全屏镜像上方需求很简单, 通过原生的video控制条和简单的c原创 2020-09-11 20:24:42 · 485 阅读 · 0 评论