由于项目需要,所以要播放flv格式的视频流,下面记录一下过程
首先需要安装flv.js
npm install --save flv.js
在html中使用
<template>
<div>
<video id="videoElement" controls autoplay muted width="300px" height="200px">
</video>
<button @click="play">播放</button>
</div>
</template>
接着js的部分如下
import flvjs from 'flv.js'
export default {
data () {
return {
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' // 自己的flv视频流
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
},
methods:{
play () {
this.flvPlayer.play();
}
}
}
上述代码中的url改为自己的就可以直接使用了,有时候视频加载不出来,不是前端代码的问题,而是视频流提供的有问题,可以参看我这篇文章测试一下自己得到的flv是否正常
https://blog.csdn.net/changyana/article/details/126304833
我代码中的url是一个目前可用的在线测试的flv,只要视频流正常就可以在前端加载出来了!