前端播放.flv视频流视频
首先提供一个测试.flv视频是否可以播放的小工具：
一、测试工具使用
可以自己下载potplayer这个软件，很小的一个软件，使用很方便，可以自己测试视频流是否可用。下载链接如下：
https://potplayer.en.softonic.com/download
具体使用方法如下：
在软件屏幕上右击，然后选择【打开】–> 【打开链接】
然后在上方输入在线测试的链接，然后点击【确定】
如果当前在线链接可以用，就会播放出视频，否则的话就会报错，如下图，就知道当前的视频流不可用了。
二、flv
我在页面需要展示一个监控画面，所以拿到了一个.flv+token形式的的地址。
因为前端vue的<video>标签src不支持播放这种格式，所以引入了flv。过程很多报错，尝试换用慧视云平台的SDK发现不支持这种格式的视频。（ http/flv协议 h264编码的 ）
所以又继续用flv。网上可以查到用法，主要是mounted里，可能本地会报网络错误，可以暴露下地址在其他电脑试试看。
<template>
<div>
<video id="videoElement" controls autoplay muted width="100%" height="50%">
</video>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
props: {
url: {
type: String
}
},
data() {
return {
flvPlayer: null
}
},
mounted() {
console.log('这里接收URL', this.url)
if (flvjs.isSupported()) {
console.log('走了')
var videoElement = document.getElementById('videoElement')
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
hasAudio: false,
url: this.url // 自己的flv视频流
})
this.flvPlayer.attachMediaElement(videoElement)
this.flvPlayer.load()
this.flvPlayer.play()
}
},
methods: {
play() {
this.flvPlayer.play()
}
},
beforeDestroy() {
this.url = ''
}
}
</script>
