b站flv.js使用_由原生js开发、实现在html5播放flv格式视频的js库

更新日期: 2018-03-22 阅读: 8.3k 标签: flv.js

Flv.js是什么?

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

flv的功能:  

  • FLV 容器,具有 H.264 + AAC 编解码器播放功能

  • 多部分分段视频播放

  • HTTP FLV 低延迟实时流播放

  • FLV 通过 WebSocket 实时流播放

  • 兼容 Chrome, FireFox, Safari 10, IE11 和 Edge

  • 十分低开销,并且通过你的浏览器进行硬件加速


flv的使用:

github地址:https://github.com/Bilibili/flv.js

例子:

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>



本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/537

flv.js实战_使用flv.js做直播

为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命。

flv.js在vue项目的应用

先取到接口数据,后播放。使用async await关键字实现顺序加载视频 伪代码,在mounted生命周期内渲染视频,lv.js在播放前需要检查是否已创建实例,如果已有实例,则销毁,在重新创建播放器实例。

flv.js的追帧、断流重连及实时更新的直播优化方案

最近在处理前端直播的业务,根据业务需要,使用 flv.js 的方案播放实时的flv视频流。不得不承认,flv.js 是一个伟大的库。在使用flv.js开发的过程中,遇到了一些问题,也无外乎是视频延迟,视频卡顿等问题

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!