flv.js入门教程_HTML5 Flash 视频(FLV)播放器

flv.js入门教程

GitHub:https://github.com/Bilibili/flv.js

flv.js入门教程_HTML5 Flash 视频(FLV)播放器

简介描述:HTML5 Flash 视频(FLV)播放器

B站相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发(ECMAScript 6 编写) ,没有用到 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流,并实时转封装为 fmp4 ,通过 Media Source Extensions 喂给浏览器,实现了 FLV 格式视频的播放。


flv.js 是使用 ECMAScript 6 编写的,然后通过 Babel Compiler 编译成 ECMAScript 5,使用 Browserify 打包。

功能:

  • FLV 容器,具有 H.264 + AAC 编解码器播放功能
  • 多部分分段视频播放
  • HTTP FLV 低延迟实时流播放
  • FLV 通过 WebSocket 实时流播放
  • 兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
  • 十分低开销,并且通过你的浏览器进行硬件加速

flv.js 优势

  • 由于浏览器对原生Video标签采用了硬件加速,性能很好,支持高清。

  • 同时支持录播和直播

  • 去掉对Flash的依赖

flv.js 限制

  • FLV里所包含的视频编码必须是H.264,音频编码必须是AAC或MP3, IE11和Edge浏览器不支持MP3音频编码,所以FLV里采用的编码最好是H.264+AAC,这个让音视频服务兼容不是问题。

  • 对于录播,依赖 原生HTML5 Video标签 和 Media Source Extensions API

  • 对于直播,依赖录播所需要的播放技术,同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据,支持流式IO的有fetch或者stream
     

  • flv.min.js 文件大小 164Kb,gzip后 35.5Kb,flash播放器gzip后差不多也是这么大。 

  •  由于依赖Media Source Extensions,目前所有iOS和Android4.4.4以下里的浏览器都不支持,也就是说目前对于移动端flv.js基本是不能用的。

海计划公众号
(0)
上一篇 2020/03/06 08:34
下一篇 2020/03/06 08:34

您可能感兴趣的内容

FOOTER</footer

2020/04/06
  • css加载失败的原因是什么?入门百科_加载基础指南 Web前端

    css加载失败的原因是什么?入门百科_加载基础指南

    有很多刚刚接触css的新手有时会遇到css加载失败这个问题,但测试时,网页上没有显示该样式的问题,这就说明CSS加载失败了。那么为什么会加载失败?css加载失败的原因是什么?造成css加载失败的原因有很多,这可能跟你代码出错,浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。最常见的失败原因有以下几类:1、网络原因IIS空间不足、浏览者网速慢、空间

    2020/03/22
  • hamburgers指南攻略_超酷图标变形动画特效 Web前端

    hamburgers指南攻略_超酷图标变形动画特效

    hamburgers指南攻略 官方网址:https://jonsuh.com/hamburgers GitHub:https://github.com/jonsuh/hamburg…

    2020/03/06
  • 对NodeJS模块机制的理解小白攻略_机制菜鸟教程 Web前端

    对NodeJS模块机制的理解小白攻略_机制菜鸟教程

    1. CommonJS模块规范1.1 模块引用var math = require(‘math’);1.2 模块定义上下文提供exports对象用于导出当前模块的方法和变量,并且他是唯一的导出出口,exports实际上是module.exports,而module.exports就是以一个暴露给外部的对象。exports.some就是给这个对象上添加属性直接

    2020/03/23
  • ES6中代理和反射(proxy)菜鸟教程网_proxy使用帮助 Web前端

    ES6中代理和反射(proxy)菜鸟教程网_proxy使用帮助

    通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。创建一个简单的代理当你使用Proxy构造器来创建一个代理时,需要传递两个参数:目标对象以及一个处理器,后者是定义了一个或多个陷阱函数的对象。如果未提供陷阱函数,代理会对所有操作采取默认行为。使用

    2020/03/29
  • vue-beauty基础教程_基于 vue.js 和 ant-design样式 的PC端 UI库 Web前端

    vue-beauty基础教程_基于 vue.js 和 ant-design样式 的PC端 UI库

    vue-beauty基础教程 官方网址:https://fe-driver.github.io/vue-beauty/ GitHub:https://github.com/FE-D…

    2020/03/06
  • TypeScript基本类型和变量声明菜鸟知识_声明入门知识 Web前端

    TypeScript基本类型和变量声明菜鸟知识_声明入门知识

    基本类型布尔值TypeScript和JavaScript一样,这是最简单的数据类型为boolean,也就是true和false。let isDone: boolean = false;数字TypeScript和JavaScript一样,TypeScript里的所有数字都是浮点数,类型为number。和ES6中一样,TypeScript支持十进制,十六进制,二

    2020/03/20
  • jquery.panzoom入门教程_元素平移和缩放插件 Web前端

    jquery.panzoom入门教程_元素平移和缩放插件

    jquery.panzoom入门教程 GitHub:https://github.com/timmywil/panzoom 简介描述:元素平移和缩放插件 Panzoom是一个渐进的…

    2020/03/06
  • js递归实现方式小白教程_递归小白基础 Web前端

    js递归实现方式小白教程_递归小白基础

    定义:递归函数就是在函数体内调用本函数;递归函数的使用要注意函数终止条件避免死循环;递归实现形式:1.声明一个具名函数,通过函数名调用function f(a){if(a<=1){return 1}else{return a*f(a-1)}
    }但是这样使用会因为 函数名 f 的变化而报错,f = null
    f () // Uncaught TypeErro

    2020/03/24
  • Enchant.js小白指南一个模块化的、面向对象的JavaScript框架 Web前端

    Enchant.js小白指南一个模块化的、面向对象的JavaScript框架

    Enchant.js基础入门 官方网址:http://enchantjs.com/ GitHub:https://github.com/wise9/enchant.js 简介描述:…

    2020/03/05
  • Web开发人者的十大Bug跟踪工具基础入门_Bug小白基础 Web前端

    Web开发人者的十大Bug跟踪工具基础入门_Bug小白基础

    一直以来,可视化 Bug 跟踪工具都能帮助开发人员加速构建 Web 开发项目。因此作者在对大量的 Bug 跟踪工具进行了研究后,特别针对 Web 开发人员和设计人员列出了十大 Bug 跟踪工具。在当今数字技术时代,网站和网页设计受到了个人及企业的极大追捧。Web 开发人员正致力于在网站中使用嵌入技术和创新元素,来实现必要的业务设计。同时这也需要开发人员花费大

    2020/03/29
  • web前端开发好学吗?基础教程_基础指南 Web前端

    web前端开发好学吗?基础教程_基础指南

    随着互联网+时代的到来,移动互联网行业的发展也是突飞猛进。目前较为火热的当属Web前端开发。对于0基础想从事互联网行业的小伙伴们,Web前端开发将会是最合适的入门编程语言。无论你是否承认,这个时代已经被网页所包围了。多样化的网站,赏心悦目的界面以及各种各样出乎意料又在情理之中的便利功能………….这所有一切,都是前端工程师的杰作。今天给大家聊的

    2020/03/29
  • Remodal小白攻略_一个扁平化,响应式,轻量,快速,容易定制的模态窗口插件 Web前端

    Remodal小白攻略_一个扁平化,响应式,轻量,快速,容易定制的模态窗口插件

    Remodal小白攻略 官方网址:http://vodkabears.github.io/remodal/ GitHub:https://github.com/vodkabears…

    2020/03/06
  • The Design Inspiration菜鸟知识_网页、LOGO、插画、名片等设计欣赏 Web前端

    The Design Inspiration菜鸟知识_网页、LOGO、插画、名片等设计欣赏

    The Design Inspiration菜鸟知识 官方网址:http://thedesigninspiration.com/ 简介描述:网页、LOGO、插画、名片等设计欣赏 T…

    2020/03/06
  • Drupal使用教程使用PHP语言编写的开源内容管理框架(CMF) Web前端

    Drupal使用教程使用PHP语言编写的开源内容管理框架(CMF)

    Drupal使用帮助 官方网址:https://www.drupal.org/ 简介描述:使用PHP语言编写的开源内容管理框架(CMF) Drupal是使用PHP语言编写的开源内容…

    2020/03/06
  • 高级程序开发者有哪些特征?入门百科_程序入门基础 Web前端

    高级程序开发者有哪些特征?入门百科_程序入门基础

    开发人员的技能范围很广——资历往往不能决定一个人的能力。那么,是什么让一些人比他们的同龄人更优秀呢?是什么将他们与平庸的人群区分开来?拥有五年、十年甚至十五年的「工作经验」并不一定能保证你是一个高效的高级开发人员,甚至不一定会拥有这个头衔。当然,也有一些成功的高级开发,他们往往年纪更大,也不是很具有代表性。年轻的高级开发也不会到处都是,但高级开发人员有一些共

    2020/03/26