vue使用vue-video-player播放rtmp流进行直播

最新推荐文章于 2025-07-06 13:17:14 发布

lhp_36kr

最新推荐文章于 2025-07-06 13:17:14 发布

阅读量8.3k

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lhp_36kr/article/details/92795890

博客介绍了vue-video-player的相关参考链接，包括npm和github页面。给出了安装命令，如npm install vue-video-player --save等，还说明了在main.js中配置和项目使用的情况。同时指出npm install --save videojs-flash执行时可能报错，并给出两种错误的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 参考：

https://www.npmjs.com/package/vue-video-player

https://github.com/surmon-china/vue-video-player/tree/master/examples

https://surmon-china.github.io/vue-video-player/

2. 安装：

npm install vue-video-player --save

npm install --save videojs-flash

3. 在main.js中配置：

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VueVideoPlayer)

4. 在项目使用：

<template>
  <div>
    <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
  </div>
</template>
<script>
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  import 'videojs-flash'

  export default {
    components: {
      videoPlayer
    },
    data () {
      return {
        playerOptions: {
          height: '300',
          sources: [{
            type: 'rtmp/mp4',
            src: '' //rtmp流地址
          }],
          techOrder: ['flash'],
          autoplay: false,
          controls: true,
          poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg'
        }
      }
    }
  }
</script>

5. npm install --save videojs-flash 执行过程中可能会报错

错误一：