vue使用vue-video-player插件进行rtmp推流（flv格式）

前提：插件版本以及所用插件

通过命令行进行安装

npm install --save vue-video-player

npm install --save videojs-flash

注意！！！安装建议使用npm安装，不要使用cnpm安装，不知道何种原因cnpm安装可能会导致一些错误，使用npm安装则一点毛病没有

一、导入依赖包

import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'

import 'videojs-flash'

import SWF_URL from 'videojs-swf/dist/video-js.swf'

二、配置videoPlayer

vue组件代码如下：

<videoPlayer ref="videoPlayer"
                     class="vjs-custom-skin videoPlayer"
                     :options="videoOptions"
                     :playsinline="true"
                     webkit-playsinline=""
                     controls
                     x5-video-player-fullscreen="true"
                     x5-playsinline
                     @play="onPlayerPlay($event)"
                     style="object-fit:fill;" />

js代码如下：

export default {
  data () {
    return {
    
      videoOptions: {

        live: true,

        autoplay: true,

        fluid: true,
        muted: true, // 默认情况下将会消除任何音频。 //**关键问题** ios开启静音才能自动播放
        notSupportedMessage: '暂时无法播放',
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        controlBar: {

          timeDivider: true,

          durationDisplay: true,

          remainingTimeDisplay: false,

          fullscreenToggle: true // 全屏按钮

        },

        techOrder: ['flash'],

        flash: {

          hls: { withCredentials: false },

          swf: SWF_URL // 引入静态文件swf

        },

        sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换

          type: 'rtmp/flv',

          src: 'rtmp://192.168.50.123:1231/live/2' // 这是芒果TV现场直播视频，地址是可以用的，最后需要替换成后端给的项目地址

        }]

      }


    }
  },
  computed: {
    playsinline () {
      // 播放之后关闭静音
      return this.isIos();
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.videoPlayer.player

    });
  },
  destroyed () {

    this.$refs.videoPlayer.dispose

  },


  methods: {
    

    //播放回调
    onPlayerPlay (player) {
      console.log("player play!", player);
      this.title = false
    },
  },
  components: { videoPlayer }
}
</script>

修改配置

  techOrder: ['flash'],

        flash: {

          hls: { withCredentials: false },

          swf: SWF_URL // 引入静态文件swf

        },

这里配置的是flash组件

sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换

          type: 'rtmp/flv',

          src: 'rtmp://192.168.50.243:1935/live/2' // 这是芒果TV现场直播视频，地址是可以用的，最后需要替换成后端给的项目地址

        }]

在这里的type，选择的既是前端vue-video-player插件接收的格式，需与后端处理推流过来的格式一致，src既是访问数据的地址相较于get请求，

src: 'rtmp://*********'  //星号中输入的则是你自己的地址

---

总结

rtmp推流方式，类似于直播，可以支持回放等操作，而且相较于其他方式，ftmp比较顺畅也延时相较也很低，经测试在局域网中运行是几乎没有延时，在公网运行延时稍大，但是这种方式需要flash组件的加持，由于谷歌等一些浏览器取消了对flash组件的加持，所有到时很多浏览器无法接受，目前所能用到的方式只有找支付flash组件的浏览器进行展示，这个问题还没解决！！如果广大网友有解决办法可以试着分享！！！一起探究！