从上一年开始,我们开始接触直播,现在直播成本真的很低,很多CDN供应商都有提供,本文只是大概讲述播放器这个话题。

开始调研

播放格式,我挑了三种。分别是HLS,RTMP,HTTP-FLV。

下面简单说说区别,如果不做移动端,HTTP-FLV是最优选择,也是当前主流直播网站所用的格式。HLS在videojs中也有js的实现,即使是不支持hls,也能让它支持,估算兼容IE9+,或许更高。由于它的延迟比RTMP和FLV高,所以用作最后的兼容选项。RTMP跟FLV差不多,但是依赖flash技术,好坏不说。在当前情况,还是比较适合。IE都能用上,这也是无可奈何中的优选。

所以,总得来说。我是以RTMP为主,HLS为辅的方案。

最后一套代码写下来,还算顺利。videojs已经到了6.0的版本,下面说说开发中要注意的几点:

1. techOrder

这个是你使用哪种一技术优先,通常是html5,但是也有其他情况。

2. src 方法

videojs有一个src方法,用来设置播放源,如果设置为数组时,会自动为你选择,但是如果你的业务复杂的话,还是要自己去判断更多的情况。

3. 6.0版本以上,要自己设置swf的地址

videojs.options.flash.swf = [your path]

3.1 使用RTMP时,swf有bug,需要更新修复版本的swf播放器。

4. 播放hls时不会自动播放,暂时还没研究。

另外,还有组件开发。因为需要加入弹幕,所以我有2个地方需要了解。一是,如何加一个弹幕层。二是,加一个弹幕开关。

一、弹幕层

简单地了解video就会知道,在一些浏览器播放时,video会被置到最高层。弹幕就无法显示了,IOs中有playsinline可以解决,微信也有相关的设置。最后的效果就是我忘了去检查,呵呵。

总地来说,在videojs中加一个东西很方便,因为它支持组件。但是,我用了更加简单的方法,我在播放器ready完之后,在里面直接append了一个层。完美地覆盖在video上,不管是flash还是html5播放时,都可以。

二、弹幕开关

这个就不能随便动手了,因为videojs已经比较成熟,可以让我们方便地修改播放器外观。上点代码直观一些:

    function addDanmaBtn(player) {
var Dan = videojs.getComponent('Button');
var DanButton = videojs.extend(Dan, {
constructor: function() {
Dan.apply(this, arguments);
this.controlText("弹幕");
},
buildCSSClass: function() {
return "icon-danmaku vjs-control vjs-button";
},
handleClick: function() {
if (danmakuShow) {
danmaku.hide();
this.el_.className += ' off ';
} else {
danmaku.show();
this.el_.className = this.el_.className.replace(/off/, '');
}
danmakuShow = !danmakuShow;
}
});
videojs.registerComponent('DanButton', DanButton);
player.getChild('controlBar').addChild('DanButton', {}, 3);
}

最后的最后,再讲讲弹幕实现。由于时间急,没有使用github最大star那个库,反而选用了另外一个。在融入业务时,也修改了不少原来的代码,就不发出来了。再说说在弹幕渲染引擎上,大部分人都选择了DOM模式,这一点我也是费解,以前的人老说canvas好,但实现却没什么人用?我想大概是CSS3可以很方便地实现阴影,而且内存占用会比canvas的低。最后弹幕上线后,一共弹了14万多条。

------------------2019年更新-----------------

已经更新为video7,只使用hls就可以了,IE只兼容到11。如果时间充足,可以自己实现,flv+hls解决方案。线上遇到flv播放会断的问题,不知道是源问题,还是flvjs的问题(github issue也有人报这个问题)。所以,最后还是不折腾,只支持hls。

videojs做直播、弹幕的更多相关文章

  1. .NET斗鱼直播弹幕客户端(下)

    .NET斗鱼直播弹幕客户端(下) 在上篇文章中,我们提到了如何使用.NET连接斗鱼TV直播弹幕的基本操作.然而想要做得好,做得容易扩展,就需要做进一步的代码整理. 本文将涉及以下内容: 介绍如何使用R ...

  2. .NET斗鱼直播弹幕客户端(2021)

    .NET斗鱼直播弹幕客户端(2021) 离之前更新的两篇<.NET斗鱼直播弹幕客户端>已经有一段时间,近期有许多客户向我反馈刚好有这方面的需求,但之前的代码不能用了--但网上许多流传的No ...

  3. Android Studio 直播弹幕

    我只是搬运:https://blog.csdn.net/HighForehead/article/details/55520199 写的很好很详细,挺有参考价值的 demo直通车:https://do ...

  4. 直播弹幕抓取逆向分析流程总结 websocket,flash

    前端无秘密 直播的逆向抓取说到底是前端的调试和逆向技术,加上部分的dpa(深入包分析,个人能力尚作不到深入,只能作简单分析)难度较低 目前互联网直播弹幕主要是两种技术实现. 1websocket消息通 ...

  5. h5做直播的弹幕效果

    最近在搞弹幕效果所以就写一个关于弹幕的吧,刚开始寻思去网上找插件的,但找的插件和我的需求都不太相符,其实做弹幕我知道的有两种方法: 1:一种是用canvas和对象来完成弹幕想过,用canvas来完成弹 ...

  6. 现在有很多第三方的SDK来做直播,那么我们改选择哪一种?

    现在大部分的都会借助第三方的直播技术,这样可以保证直播的质量,趣拍直播就很不错,SDK很好集成,芒果直播也在用.下面来分析一下趣拍直播的一些心得. 如何快速搭建一个完整的手机直播系统 在这个直播如火如 ...

  7. .NET斗鱼直播弹幕客户端(上)

    现在直播平台由于弹幕的存在,主播与观众可以更轻松地进行互动,非常受年轻群众的欢迎.斗鱼TV就是一款非常流行的直播平台,弹幕更是非常火爆.看到有不少主播接入弹幕语音播报器.弹幕点歌等模块,这都需要首先连 ...

  8. iOS 视频直播弹幕的实现

    弹幕,并不是一个多么复杂的功能. 1.弹幕的实现性分析 首先,从视觉上明确当前弹幕所具有的功能 从屏幕右侧滑入左侧,直至完全消失 不管是长的弹幕,还是短的弹幕,速度一致(可能有的需求是依据弹幕长度,调 ...

  9. python爬取斗鱼B总直播弹幕

    在某群中看到关于弹幕爬取的需求,又因为斗鱼比较OP,就以这个作为切入点. 如果你想了解如何获取弹幕,我的这个例子就可以让你豁然开朗,对于哪些没有开发弹幕的直播或视频平台,就需要用抓包工具获取请求,然后 ...

随机推荐

  1. java面试及答案

    优秀总结博客 mybatis总结 java并发包相关 一.Java基础 1.String类为什么是final的. 2.HashMap的源码,实现原理,底层结构. hashmap3.反射中,Class. ...

  2. 深入理解JVM一性能监控工具

    一.前言 工欲善其事必先利其器,性能优化和故障排查在我们大都数人眼里是件比较棘手的事情,一是需要具备一定的原理知识作为基础,二是需要掌握排查问题和解决问题的流程.方法.本文就将介绍利用性能监控工具,帮 ...

  3. CentOS 7下安装pptp服务端手记 ok

    主要配置步骤 1. 安装前检查系统支持 2. 安装必要包 3. 修改相关配置文件 4. 设置开机自动启动 pptpd, iptables 5. iptables配置网络 6. 阿里云ECS可能还需要几 ...

  4. 十大最佳Leap Motion体感控制器应用

    十大最佳Leap Motion体感控制器应用   Leap Motion Controller也许还没有准备好大规模的发售,但是毫无疑问,这款小巧的动作捕捉器是我们见过的最酷的设备之一.这款设备的硬件 ...

  5. 【入门OJ】2003: [Noip模拟题]寻找羔羊

    这里可以复制样例: 样例输入: agnusbgnus 样例输出: 6 这里是链接:[入门OJ]2003: [Noip模拟题]寻找羔羊 这里是题解: 题目是求子串个数,且要求简单去重. 对于一个例子(a ...

  6. 51nod 1766 树上的最远点对(线段树)

    像树的直径一样,两个集合的最长路也是由两个集合内部的最长路的两个端点组成的,于是我们知道了两个集合的最长路,枚举一下两两端点算出答案就可以合并了,所以就可以用线段树维护一个区间里的最长路了. #inc ...

  7. vue2.0 安装及项目搭建(一)

    基本环境安装 1.安装node:从node.js官网下载并安装node.测试:win+R(打开命令行)-------输入cmd-------敲入node -v.如果出现相应版本号,即安装成功: 2.测 ...

  8. 【目标检测大集合】R-FCN、SSD、YOLO2、faster-rcnn和labelImg实验笔记

    R-FCN.SSD.YOLO2.faster-rcnn和labelImg实验笔记 转自:https://ask.julyedu.com/question/7490 R-FCNpaper:https:/ ...

  9. poj3783 Balls

    Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1110   Accepted: 721 Description ...

  10. nginx优化--gzip压缩与expire浏览器缓存

    gzip压缩 概述 网页在服务器端经过了gzip或者其他格式的压缩后的输出明显减少了content-length字节,当访问过百万时,这些减少的字节就会变为客观的流量给节约下来;从而减轻服务器的压力以 ...