前端播放.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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了