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’

     
     
     
     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视频流也遇到了同样的报错问题,并有解决方案的话,可以在下方评论哦! 谢谢

你可能感兴趣的:(VUe,js)