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

html-css07

使用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

<video width="320" height="240" controls> 

<!-- 兼容 Firefox --> 

<source src="http://www.jb51.net/ movie.ogg" type="video/ogg" /> 

<!-- 兼容 Safari/Chrome--> 

<source src="http://www.jb51.net/ movie.mp4" type="video/mp4" /> 

<!-- 如果浏览器不支持video标签，则使用flash --> 

<embed src="http://www.jb51.net/ movie.swf" type="application/x-shockwave-flash" 

width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed> 

</video>

除了给video标签直接指定文件地址，HTML5还有个MSE来支持音视频播放，就像Flash的数据生成模式，只不过Flash只认FLV，而HTML5可以播Mpeg4，比如fMP4。playease.js就支持http-flv、websocket-flv、websocket-fmp4等。