vue-cli3+videojs+rtmp+动态更改视频路径

本文链接：https://blog.youkuaiyun.com/qq_41619796/article/details/102989603

前言：

又一次和直播流 rmtp 相遇了，真是欲生欲死啊，之前vue-cli2的时候用的ckplay.js来实现的效果，可是vue-cli3中，ckplay出了问题，一直是他内部方法报错，这里用video.js来实现，

实现效果：点1是湖南台的直播，点2是一个MP4的视频

实现步骤：最新版本在下面

版本一：2019-11-09 17:33:38

这个版本会报错 this.el_.vjs_getProperty is not a function 解决方法入口

第一：安装必要插件：

npm install --save videojs-flash
npm install video.js

//这里不是必须，这里只是引入它的样式而已，不装就把那行引入样式的注释掉
npm install vue-video-player

第二：template部分

第三：data部分，这里定义了在线视频流地址

第四：methods里面

完整代码：

<template>
  <div class="videoDiv">
    <button @click="aclick">点我1</button><button @click="bclick">点我2</button>
     <video v-if="isVideo" id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
          poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
          <source :src='options.url' :type='options.type'/>
    </video>
 </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
export default {
  props: {},
  data () {
    return {
      name:'video.js',//video.js实现视频播放
      options:{
        url:'rtmp://58.200.131.2:1935/livetv/hunantv',//湖南台的直流地址
        type:'rtmp/flv'
      },
      isVideo:true,//强制刷新使用
      player:null,//视频
    };
  },

  components: {},

  computed: {},

  created() {},

  mounted() {
    this.initVideo();
  },

  methods: {
    /**
    *   初始化播放视频
    **/
    initVideo(){
        //谷歌浏览器要专门去开启flash播放器，打包后查看和代码运行都需要重新设置flash为允许状态
        // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
        videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
        this.player = videojs('my-player'); //my-player为页面video元素的id
        this.player.play(); //播放
    },
    /**
     * 更改配置
     */
    aclick(){
      this.player.src([
        {
          type: 'rtmp/flv',
           src: 'rtmp://58.200.131.2:1935/livetv/hunantv'//湖南直流地址
        }
      ])
    },
    bclick(){
      this.player.src([
        {
          type: 'video/mp4',
          src: 'https://v-cdn.zjol.com.cn/280443.mp4'//一个网上宣传的小视频地址
         }
      ])
    }
  },
}

</script>
<style lang='less' scoped>
  .videoDiv,.video-js{
    width:100%;
    height:100%;
  }
</style>

版本二：2019-11-12 ，这个版本主要是解决上个版本使用后报错

应用场景 vue-cli3+antd+video

第一：最外层的model调用部分

template部分：

 <!-- 视频详情弹框 -->
    <a-modal
      wrapClassName='videoDetailsModel'
      v-model="visible"
      :destroyOnClose="true" //设备为true后，每次关闭弹框都会销毁其中的内容
      :title="videoTit"
      :footer="null"
      >
      <div class="videoDetails">
        <modelVideo ref="videoM" class="modelV"></modelVideo>

      </div>
    </a-modal>

js部分：


import modelVideo from '@/components/common/model_video'//弹框内部的视频部分

components: {
    modelVideo
  },

第二：model_video.vue部分

template部分：

js部分：

1、初始化播放视频

/**
     * 初始化视频的
     */
    initModelVideo(){
        this.nowOptions = {
          url:'rtmp://58.200.131.2:1935/livetv/hunantv',
          type:'rtmp/flv'
        }
       this.$refs.myVideo.initVideo();
    },

2、组件销毁调动方法处理视频

beforeDestroy(){
    this.$refs.myVideo.destroyVideo();
  },

第三：我们的m_video.vue组件

相比较上面两个小地方变动，

1、初始化方法不是mouned里面调用了，而是外面调用

2、多了一个处理视频的方法

     /**
     * 强制处理video元素-每次初始化前调用
     */
    destroyVideo(){
      if(this.player!=null){
        this.player.dispose();
        this.player=null;
      }
    },

<template>
  <div class="videoDiv">
     <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
          poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
          <source :src='options.url' :type='options.type'/>
    </video>
 </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
export default {
  props: {
    /**
     * 视频配置
     *  nowOptions:{//默认是直播地址
        url:'rtmp://58.200.131.2:1935/livetv/hunantv',
        type:'rtmp/flv'
      }
     */
    nowOptions:Object,
  },
  data () {
    return {
      name:'video.js',//video.js实现视频播放
      options:{
        url:'rtmp://58.200.131.2:1935/livetv/hunantv',
        type:'rtmp/flv'
      },
      player:null,//视频
    };
  },

  components: {},

  computed: {},

  created() {},

  mounted() {

  },

  methods: {
    /**
    *   初始化播放视频
    **/
    initVideo(){
        //谷歌浏览器要专门去开启flash播放器，打包后查看和代码运行都需要重新设置flash为允许状态
        // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
        videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
        this.player = videojs('my-player'); //my-player为页面video元素的id
        this.player.src([{
            type: this.nowOptions.type,
            src: this.nowOptions.url
          }])
        this.player.play(); //播放
    },
    /**
     * 更改配置
     */
    changeOptions(data){
      if(this.player == null){
        this.initVideo();
      }else{
        this.player.src([{
          type: data.type,
          src: data.url
        }])
      }

    },
    /**
     * 强制处理video元素-每次初始化前调用
     */
    destroyVideo(){
      if(this.player!=null){
        this.player.dispose();
        this.player=null;
      }
    },
  },
}

</script>
<style lang='less' scoped>
  .videoDiv,.video-js{
    width:100%;
    height:100%;
  }
</style>