vue实现拉流播放
Vue 中实现拉流播放的方法
使用 video.js 和 videojs-contrib-hls
安装依赖包：
npm install video.js videojs-contrib-hls在 Vue 组件中引入：
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'组件模板：
<template>
<video ref="videoPlayer" class="video-js"></video>
</template>组件脚本：
export default {
mounted() {
this.player = videojs(this.$refs.videoPlayer, {
autoplay: true,
controls: true,
sources: [{
src: '你的流媒体地址',
type: 'application/x-mpegURL'
}]
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}使用 flv.js 播放 FLV 流
安装 flv.js：
npm install flv.js组件实现：
import flvjs from 'flv.js'
export default {
data() {
return {
player: null
}
},
mounted() {
if (flvjs.isSupported()) {
this.player = flvjs.createPlayer({
type: 'flv',
url: '你的FLV流地址'
})
this.player.attachMediaElement(this.$refs.videoElement)
this.player.load()
this.player.play()
}
},
beforeDestroy() {
if (this.player) {
this.player.destroy()
}
}
}使用 hls.js 播放 HLS 流
安装 hls.js：
npm install hls.js组件实现：
import Hls from 'hls.js'
export default {
mounted() {
const video = this.$refs.videoElement
const hls = new Hls()
hls.loadSource('你的HLS流地址')
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
}
}使用原生 HTML5 video 标签
对于支持原生播放的浏览器：
<video controls autoplay>
<source src="你的流地址" type="video/mp4">
</video>注意事项
不同流媒体协议需要不同的处理方式：
- RTMP：需要 flash 支持，现代浏览器已逐渐淘汰
- HLS：适合苹果设备和大多数现代浏览器
- FLV：需要 flv.js 等库支持
- WebRTC：适合实时通信场景
根据实际流媒体协议选择合适的播放方案，并注意处理跨域问题和播放器销毁逻辑。
