html5页面中使用videojs播放rtmp视频流（VUE）

方法很简单，这里就简写了

1. 在Vue 项目中 安装 npm install vue-video-player --save

2. 安装 npm install videojs-flash --save

3. 在Vue项目 main.js 中引入

   import VueVideoPlayer from 'vue-video-player' Vue.user(VueVideoPlayer)

4. 在 Vue项目main.js 中引入 或者在当前组件中引入

   import 'video.js/dist/video-js.css'
   import 'vue-video-player/src/custom-theme.css' // 引入样式
   import 'videojs-flash'

    <videoPlayer style="object-fit: fill; width: 100%"
                class="vjs-custom-skin videoPlayer"
                ref="videoPlayer"
                :options="playerOptions"
                :playsinline="true"
                @ready="playerReadied">
    </videoPlayer>
    
    data () {
        return {
          playerOptions: {
            width: 800,
            height: 500,
            sources: [{
              type: 'rtmp/mp4',
              src: 'rtmp视频流'
            }],
            techOrder: ['flash'],
            autoplay: true,
            muted: true
          }
        }
     },
   

我目前遇到的一个问题，就是在vue-cli3 版本中使用videojs 播放rtmp视频流时报错 The "flash" tech is undefined. Skipped browser support check for that tech。在网上查询关于问题的解决方案，发现都是针对于vue-cli2版本的。

最终的解决办法是 将vue-cli3 修改为 vue-cli2。 视频流播放正常， 如果您在 vue-cli3版本中使用 videojs 播放rtmp视频流也遇到了同样的报错问题，并有解决方案的话，可以在下方评论哦！ 谢谢