vue引入rtmp文件流

初始化脚手架

npm install vue-cli --global

创建文件

vue init webpack vue-player

安装 vue-video-player（注意要有--save）

npm install vue-video-player --save
npm uninstall vue-video-player // 第一次安装完会报错
npm install vue-video-player --save

启动项目

npm run dev

配置路由，视频组件：component/player.vue

<template>
  <video-player class="vjs-custom-skin videoPlayer"
                :options="playerOptions"
  ></video-player>
</template>

<script>
import 'video.js/dist/video-js.css'
import 'videojs-flash'
import { videoPlayer } from 'vue-video-player' // 有多个输出值，引入花括号
export default {
  data() {
    return {
      playerOptions: {
        height: '360',
        sources: [{
          type: "rtmp/mp4",
          src: "rtmp://127.0.0.17"
        }],
        techOrder: ['flash'],
        autoplay: true,
        controls: false
      }
    }
  },
  components: {
    videoPlayer,
  }
}
</script>