vue实现.flv播放
在Vue中实现FLV播放
使用flv.js库可以实现在Vue中播放FLV格式视频。flv.js是由B站开源的一个JavaScript库，通过将FLV文件流转换为ISO BMFF（Fragmented MP4）片段，然后通过Media Source Extensions API将MP4片段喂给HTML5 <video>元素。
安装flv.js
通过npm或yarn安装flv.js：
npm install flv.js --save
# 或
yarn add flv.js基本实现方法
创建一个Vue组件来加载和播放FLV流：
<template>
<div>
<video ref="videoElement" controls autoplay muted></video>
</div>
</template>
<script>
import flvjs from 'flv.js'
export default {
name: 'FlvPlayer',
props: {
url: {
type: String,
required: true
}
},
data() {
return {
flvPlayer: null
}
},
mounted() {
this.initPlayer()
},
beforeDestroy() {
this.destroyPlayer()
},
methods: {
initPlayer() {
if (flvjs.isSupported()) {
const videoElement = this.$refs.videoElement
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
url: this.url
})
this.flvPlayer.attachMediaElement(videoElement)
this.flvPlayer.load()
this.flvPlayer.play()
}
},
destroyPlayer() {
if (this.flvPlayer) {
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
}
}
}
}
</script>使用组件示例
在父组件中使用FLV播放器：
<template>
<div>
<flv-player url="http://example.com/live.flv" />
</div>
</template>
<script>
import FlvPlayer from './components/FlvPlayer.vue'
export default {
components: {
FlvPlayer
}
}
</script>处理跨域问题
如果FLV流来自不同域，可能需要配置CORS。确保服务器返回正确的CORS头：
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: Range错误处理
添加错误处理以增强用户体验：
initPlayer() {
if (flvjs.isSupported()) {
const videoElement = this.$refs.videoElement
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
url: this.url
})
this.flvPlayer.attachMediaElement(videoElement)
this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
console.error('FLV播放错误:', errType, errDetail)
// 处理错误逻辑
})
this.flvPlayer.load()
this.flvPlayer.play()
} else {
console.error('浏览器不支持flv.js')
}
}性能优化
对于长时间播放的直播流，可以添加缓冲区控制：
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
url: this.url,
isLive: true,
hasAudio: false,
stashInitialSize: 128 // 减小初始缓冲区大小
})浏览器兼容性
flv.js需要浏览器支持Media Source Extensions和WebSocket。现代浏览器如Chrome、Firefox、Edge和Safari 11+都支持。对于不支持的浏览器，可以提供回退方案或提示信息。
