目录
安装
组件内引入
使用
效果图
播放失败原因
安装
npm install flv.js
组件内引入
import flvjs from 'flv.js'
使用
import flvjs from 'flv.js'
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App',
flvPlayer:null
}
},
mounted() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
},
methods:{
play () {
this.flvPlayer.play();
}
}
}
效果图
播放失败原因
协议不支持
在一开始我以为flvjs可以播放所有flv格式的视频流，但是经过测试和查看文档发现，这个包仅支持HTTPFLV协议的流，如果使用RTMP协议的流则依然需要使用flash插件。
支持：http://www.xxxxxxx.com:18080/11/22.flv
不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv
到此这篇关于Vue中使用flv.js播放视频的示例详解的文章就介绍到这了,更多相关Vue flv.js播放视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能
flv.js的具体使用教程
flv.js在vue中的使用方法
通过flv.js播放监控示例深入探究直播流技术
vue3使用flv.js播放推流视频的示例代码
vue3使用flv.js播放flv直播流的代码示例
HTML5 FLV播放器flv.js使用说明