HTML5弹幕视频播放器

2024年2月25日 143次阅读 来源: 孤月

媒介

人人年前好，立时就要除夕了，在良久没有写文章以后，想到这篇文章将会成为本人本年的
绝响也是有点蛋疼。不过也好，毕竟本人算不得什么勤劳的生物，而且比起那些大神来讲也差远了，就作为本身事情半年后的一次沉淀算了。

文中有些头脑能够不见得是最好的解决办法，大神们请轻喷。

这个项目本来是我本身预备的一个开源插件，但由于上班写这个的历程当中被老板发现了（∑(O_O；)），就说把这个东西写成公司用的吧，然后，然后开源就GG了（我了个大擦，我说我这个是本身的项目也没用），虽然说也能够偷偷放出来，但毕竟我还在职，就谅解我此次没办法把代码放出来吧。我会在解说历程当中尽量解说细致的。以上。。。。最先一波交♂易吧，骚年们（手动诙谐）

demo ： 我是你亲爱的demo （弹幕数2000）

预备

最少须要有canvas和js的编程履历，然后养成一个好的代码习气（不然一段时候后你都不晓得你本身干了什么），下面解说的内容不会涉及到详细顺序和功用的编写，更多地是在强调机能优化这方面，完全当教程看的能够略过了。。。大神请随便

一. 拔取适宜的计划

实在完成弹幕的体式格局能够有多种，比如说用dom和canvas完成都是能够的，但我们这里拔取的是canvas来绘制弹幕。

斟酌到dom 只适合在单元时候内绘制少许弹幕 ，这关于我们播放器来讲显著是分歧需求的。实在去过B站的都晓得，由于播放器有时会涌现短时候内的“弹幕轰炸”，你想一想假如是用dom来写，页面霎时建立几百个、以至上千个element。。。那酸爽，简直让人不敢相信。。。所以说，dom只适用于那些对时候把握请求不那么高的项目，由于你能够经由过程掌握单元时候内弹幕的绘制数目来到达减缓机能的目标。

运用canvas优点有几点：
    1.不必频仍的操控dom元素
    2.有壮大的api，操纵简朴
    3.在挪动装备上也能比较高机能地运转
    4.强化你的代码组织能力（怎样更好地星散功用什么的，而不是加个css3动画就了事）

二. 尽量地多斟酌挪动装备和PC的差别

实在最简朴的就体现在api上，比如说完成全屏形式，实在android和ios到目前为止都照样不支持元素全屏的，所以说你这里要斟酌 requestFullScreen 不能用的情况下，对挪动装备的降级处置惩罚。另有一点就是挪动装备和PC的机能差异照样有点大的，这就须要你斟酌在某些斲丧机能的功用和用户体验之间做些弃取。

三. 在殊效和机能之间做出均衡

实在这里也是斟酌各个主流浏览器的机能差别，对某些功用做出恰当的调解。实在在运用canvas text API的时刻，有些结果的运用是会大大地加重浏览器的累赘，比如说：笔墨暗影、渐变、变更等；不见得每一个浏览器都能很敏捷的绘制出你想要的结果，纵然在你本身看起来不怎样须要时候。 这里，chrome内核的浏览器表现极为优异，反而让我一脸懵逼的是火狐。。在这我整理了一些主流浏览器在绘制方面的差别（参考数据）：

    upperNum : {
        //当弹幕数凌驾肯定数额时，作废笔墨的全局殊效（如暗影等）
        //ps:火狐爸爸不给力啊，向谷歌权势垂头
        "firefox" : 500,
        "safari" : 800,
        "chrome" : 2000,
        "ie" : 900,
        "edge" : 1100
    },
    scale : 1,
    rotate : 0

从上面能够看出，实在浏览器机能之间的差别照样有的，此时就须要我们依据数据的多少来调解殊效的展示，你能够离别用火狐和chrome翻开demo页面看结果

四. 削减api的操纵次数（重要部份）

如全局笔墨色彩等一些能在轮回体外设置的api，就万万不要放到轮回体内部去给每一个弹幕零丁设置（除非全局款式发生了转变）。

另有就是优化轮回，没错，就是优化轮回。。。。。当你的弹幕池到达数千以至上万的时刻，你一个轮回就可以糟蹋掉很多时候，实在有些前提到达的时刻你是没必要再举行轮回了的。关于视频弹幕来讲，我们须要的只是 “把某一个时候点的一切弹幕举行一次绘制”，如许我们就已确立了一部份优化准绳：在当前播放时候之前的弹幕我不须要管，在当前播放时候以后的弹幕我不须要管。至于怎样完成，我们能够转变for轮回的start下标来到达疏忽前面的弹幕，能够经由过程推断当前弹幕的时候和播放器时候的大小来到达跳出轮回的目标。 鄙人面的轮回体代码（部份）就可以够看出来优化的操纵

if(!this.Canvas.globalStyleHasChanged)
Canvas.setBaseTextStyle(cxt);    //设置笔墨基础款式，我们在这里设置好一致款式

//我这里是弹幕轮回
for( var i = DMsystem.idx, DM; DM = DMs[i++]; ){
    if( DM.currentTime > currentTime ){
        break; 
    }
    if( DM.currentTime < currentTime && !DM.isDisplaying ){
        DM.hasShowed = true;
        continue;
    }
    DMsystem.refresh(DM);             //更新位置
    Canvas.drawDM(cxt,DM,options);     //绘制
    DMsystem.recovery(DM,currentTime);          //推断弹幕是不是显现终了并接纳相干行
}

五. 防止某些误区

实在在这一版之前我还写过1.0版，不过在挪动装备上的机能太蹩脚所以舍弃了（你们能够用手机翻开这一版demo看看结果，机能实在照样能够的），原因是我把每一条弹幕都new了一个实例。。。当时忙着js的伪面向对象编程实践：“弹幕嘛，每一条弹幕都应当是一个成熟的个别，不仅有本身奇特的色彩，另有地点的位置…..”。然后呢？当我把弹幕数调解为5000的时刻—然后就没有然后了。。。。too young too simple，sometimes naive…..浏览器直接炸掉了。。。。。所以说我们在面向对象的时刻要斟酌哪些才是真正应当new的。。（只管看起来彷佛就我本身有点蠢….）

以上就是要写的一切的东西了，只管我晓得列位看起来能够有点不那么轻易（毕竟代码少，而且讲得很笼统），当你本身最先写的时刻就会邃晓项目中大部份东西都很简朴（种种api的挪用），真正贫苦的照样机能的优化，以及对装备和浏览器差别的处置惩罚。。假如不懂的话迎接留言讯问，我这个还不是最终版，接下来还要到场形式的切换。。。比如说 直播播放器形式（live）和视频播放器形式（player）的优化细节又有点不一样，另有高等弹幕的处置惩罚（图片，图形等）。。后续有余暇时候能够会继承更新，末了再说一次————提早祝人人新年快乐

    原文作者：孤月
    原文地址: https://segmentfault.com/a/1190000007951317
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞