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

JavaScript018

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

最近因为项目需要播放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

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

具有H.264 + AAC / MP3编解码器播放功能的FLV容器

多段分段视频播放

HTTP FLV低延迟实时流播放

通过WebSocket进行FLV实时流播放

与Chrome，FireFox，Safari 10，IE11和Edge兼容

极低的开销，浏览器可以加速硬件！

1、准备一个flv格式的视频

我的文件，关于分片上传可参考 vue中使用Plupload分片上传

FLV.js视频播放重复的原因可能是由于视频的编码格式不一致或者视频的缓冲时间不够导致的。此外，视频的播放器也可能存在问题，比如播放器的版本过低或者播放器的设置不当等等。因此，如果您想解决FLV.js视频播放重复的问题，您可以尝试检查视频的编码格式，确保视频的缓冲时间足够，并且检查播放器的版本和设置，以确保播放器能够正常工作。