videojs播放rtmp视频流，解决TypeError: this.el_.vjs_getProperty is not a function错误

直接把viedojs播放器写在了组件里，方便使用，我这里写的src是在组件里，父组件变更src话，自己传吧！

videojs

<template>
	<div >
<video
    id="my-player1"
    ref='myPlayer1'
    class="video-js
    vjs-default-skin
    vjs-big-play-centered"
    preload="auto"
    width="700"
    height="400"
    data-setup='{}'
   >
  </video>
	</div>
</template>
<script>
import "video.js/dist/video-js.css";
import "videojs-flash";
import videojs from "video.js";
import { getMedia_id, setMedia_id, removeMedia_id } from "@/utils/auth";
export default {

  data() {
    return {
      options1: {
        controls: true, //控制条
        preload: "auto", //是否自动加载
        width: "700",
        height: "400",
        techOrder: ['flash', 'html5'],// 兼容顺序
        sourceOrder: true,
        flash: {
                swf: 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf'   //如果是本地视频  需要相应的videoJS.swf文件
        },
        autoplay: true, // 是否自动播放
        muted: false, // 是否静音
        sources: [{
          src:'rtmp://10.10.7.205:1936/live/'+getMedia_id(),
          //  src: 'rtmp://10.10.7.205:1936/live/rtsp_cam1', //用于测试
          type: 'rtmp/flv'
        }]
        }
    };
  },
   created() {
  },
   beforeDestroy:function(){
          const videoDom = this.$refs.myPlayer1;  //不能用document 获取节点
          videojs(videoDom).dispose() //销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function
          this.player1.dispose() //销毁video实例
 },
  mounted() {
    // videojs.options.flash.swf = "https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf";
      console.log('mounted----mounted---mounted')
    this.player1 = videojs('my-player1', this.options1, function onPlayerReady() {
        videojs.log('播放器已经准备好了!')
        this.load();
        this.play();
        this.on('pause', function() {
          console.log('暂停播放')
        })
        this.on('play', function() {
          console.log('开始/恢复播放')
        })
        this.on('ended', function() {
          console.log('结束播放')
        })
        this.on('loadeddata', function() {
          console.log('loadeddata数据加载完成')
        })
        this.on('error', function() {
          console.log('error')
        })
        
      })
      
			this.options1.autoplay = true; //再次告诉是自动播放
  }
};
</script>
<style lang="scss" scoped>
.hello{
  display: flex;
  flex-direction: row;

}
.video-js {
  width: 700px;
  height: 400px;
}
.btn{
  margin-left: 20px;
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}
</style>

父组件引用

import myvideo from "@/components/Video";



  components: {
    myvideo
  }


<myvideo ref='myPlayer1'/>

里面最重要的还是在路由切换的时候，把播放器销毁

---

• videojs(videoDom).dispose() //销毁video实例，避免出现节点不存在 但是flash一直在执行，报
  this.el…is not function
  this.player1.dispose() //销毁video实例

---