flvjs与FLV有什么区别和联系?
flv.js
是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash。由 bilibili 网站开源(Github)。
概览:
一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。
flv.js 是使用 ECMAScript 6 编写的,然后通过 Babel Compiler 编译成 ECMAScript 5,使用 Browserify 打包。
功能:
FLV 容器,具有 H.264 + AAC 编解码器播放功能
多部分分段视频播放
HTTP FLV 低延迟实时流播放
FLV 通过 WebSocket 实时流播放
兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
十分低开销,并且通过你的浏览器进行硬件加速
FLV
HTTP FLV则是将RTMP封装在HTTP协议之上的,可以更好的穿透防火墙等。rtmp和http-flv的视频格式都是flv格式的,只是传输协议而不同。rtmp是tcp的传输协议,而http-flv是http长链接的传输协议。
总结
flvjs是一个H5播放器。FLV是一种协议。flvjs可以用于播放FLV格式的视频。
几种视频流比较。
协议 | http-flv | rtmp | hls |
传输方式 | http流 | tcp流 | http流 |
视频封装格式 | flv | flv | Ts文件 |
延迟 | 低 | 低 | 高 |
数据分段 | 连续流 | 连续流 | 切片文件 |
h5播放 | flv.js | video.js | hls.js |
vue中使用flvjs
1.使用npm安装flv.js
npm install --save flv.js
2.新建FlvLive.vue文件,在文件中引入
import flvjs from 'flv.js'
<script>if (flvjs.isSupported()) { // 判断当前浏览器是否支持flv。var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({type: 'flv',// isLive: true,// hasAudio: false,url:'http://127.0.0.1:8000/live/abc.flv'});flvPlayer.attachMediaElement(videoElement); // 挂载video标签。flvPlayer.load(); flvPlayer.play(); // 播放}</script>
封装一个flv函数
function playVideo(demo, url) {demo = document.getElementById(demo);if (demo) {demo.pause()demo.unload()demo.detachMediaElement()demo.destroy()demo = null}if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv',hasAudio: false,url: url});flvPlayer.attachMediaElement(demo);flvPlayer.load(); //加载}demo.play();//断开流链接,若不断开会一直占用带宽
function destoryVideo() {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer = null;},
H265格式请使用
GitHub - langhuihui/jessibuca: Jessibuca是一款开源的纯H5直播流播放器