使用flv.js实现html5播放flv格式视频文件

Posted 2023-04-30

参考技术A 最近因为项目需要播放flv格式视频文件，但我使用是html5的vedio标签进行播放，它支持3种视频格式：mp4，WebM，Oog，是不支持的flv格式，无奈，好在网上不少大神佳作。解决我困境。

在vue项目中安装flv.js文件
npm i flv.js --save

将flv.js文件导入相关组件中。

创建video元素标签来播放视频内容。

flvjs.isSupported()是否支持，若支持。则 flvjs.createPlayer创建flv播放器对象，加载到video元素中进行播放即可

参考文档
https://www.bysb.net/2943.html

https://blog.csdn.net/weixin_45316326/article/details/99053910

JavaCV音视频开发宝典：使用JavaCV和springBoot实现websocket-flv直播服务,无需流媒体服务,浏览器网页flv.js播放器直接播放rtsp,rtmp等实时视频

《JavaCV音视频开发宝典》专栏目录导航
《JavaCV音视频开发宝典》专栏介绍和目录

​

硬核注意：本文默认读者已经熟练掌握springboot和websocket的前置知识，并已基本掌握JavaCV音视频原理。

前言

前面我们已经讲了webm直播，http-flv直播，本章就直接开始动手实现websocket-flv直播。
关于flv格式的起源与发展等等基本知识在上一章：
《JavaCV音视频开发宝典：使用JavaCV和springBoot实现http-flv直播服务,无需流媒体服务,浏览器网页flv.js转封装方式播放rtsp,rtmp和桌面投屏实时画面》中基本上都讲过了，不再赘述，有兴趣的可以去看看。

websocket-flv是为了解决http-flv的一些弊端而出现的流媒体传输技术。
websocket-flv是要解决什么问题呢？
这就不得不提到浏览器的ht