当前位置: 代码迷 >> 综合 >> 使用flv.js播放流媒体 rtmp/rtsp
  详细解决方案

使用flv.js播放流媒体 rtmp/rtsp

热度:111   发布时间:2023-11-18 14:32:18.0

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直播流播放器

  相关解决方案