vue-video-player播放rtmp 
时间: 2023-06-05 12:47:07 浏览: 125
Vue-video-player可以播放RTMP流媒体,需要使用video.js的插件videojs-flash和videojs-contrib-hls。在Vue项目中安装这两个插件后,可以使用以下代码播放RTMP流媒体:
```
<template>
<div>
<video-player ref="player" :options="playerOptions"></video-player>
</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import VideoPlayer from 'vue-video-player'
import 'videojs-flash'
import 'videojs-contrib-hls'
export default {
components: {
VideoPlayer
},
data() {
return {
playerOptions: {
autoplay: true,
controls: true,
sources: [{
type: 'rtmp/mp4',
src: 'rtmp://example.com/live/stream'
}]
}
}
}
}
</script>
```
其中,sources中的src需要替换成实际的RTMP流媒体地址。
相关推荐









vue-video-player是一个用于在Vue项目中实现实时视频播放的插件。要使用vue-video-player,首先需要在Vue项目中安装vue-video-player插件。然后,在父组件里调用视频播放组件,并通过点击事件来替换视频流地址,以实现播放实时视频。
代码示例:
<template>
<video-player ref="playerObj"></video-player>
播放视频
</template>
<script>
import VideoPlayer from './../../components/VideoPlayer'
export default {
name: 'about',
components: {
VideoPlayer
},
data() {
return {}
},
methods: {
playVideo() {
this.$refs['playerObj'].videoSrc = 'rtmp://xxxxxxxx'
this.$refs['playerObj'].playerOptions.sources[0].src = 'rtmp://xxxxxxxx'
}
}
}
</script>








