【Vue】Video.js 提示no compatible source was found for this media

问题：video.js 提示no compatible source was found for this media

查了很多文章，凡在vue项目中引入video.js插件，
都会出现视频播放器中间出现一个大叉号导致视频无法播放，同时控制台出现no compatible source was found for this media的错误提醒的情况，
究竟是什么原因呢？

1.html

<video
      id="myVideo"
      ref="myVideo"
      controls
      class="video-js vjs-big-play-centered"
      style="height:665px;max-width:887px"
    >
      <source
        :src="videoUrl"
        type="video/mp4"
      >
</video>

2.js

<script>
import Video from 'video.js'
import 'video.js/dist/video-js.css'


export default {
  data() {
    return {
      playHandler: null,
      videoUrl: 'http://kefuzhihua-1300902972.cos.ap-nanjing.myqcloud.com/1642488976180-c6883103-0bbc-4a0a-97b8-b598add8b943_material%20%281%29.mp4'
    }
  },
 mounted() {
    this.fetchVideoList(this.id)
    setTimeout(() => {
      this.initVideo()
    }, 300)
  },
  beforeDestroy() {
    this.playHandler.dispose()
  },
  async initVideo() {
      this.$nextTick(() => {
        this.playHandler = Video('myVideo', {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          // 自动播放属性,muted:静音播放
          autoplay: 'muted',
          // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto',
          // 设置视频播放器的显示宽度（以像素为单位）
          width: '887px',
          // 设置视频播放器的显示高度（以像素为单位）
          height: '665px'
        })
      })
    },
    
    /**
     * @function  获取视频素材详情
     */
    async fetchVideoList(id) {
      const res = await materialApi.query({ id })
      if (res.code === 0) {
        this.form = res.data
        // document.getElementById('myVideo').src = this.videoUrl
        this.$refs.myVideo.src = res.data.cosPath
        console.log(this.form, 'this.video.form', this.$refs.myVideo.src)
      }
    }
}

<script>

3.重点

1.this.$nextTick(() =>{}）

  async initVideo() {
      this.$nextTick(() => {
        this.playHandler = Video('myVideo', {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          // 自动播放属性,muted:静音播放
          autoplay: 'muted',
          // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: 'auto',
          // 设置视频播放器的显示宽度（以像素为单位）
          width: '887px',
          // 设置视频播放器的显示高度（以像素为单位）
          height: '665px'
        })
      })
    },

Vue.nextTick()是在下次 DOM 更新循环结束之后延迟执行的回调函数，
在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
（dom的改变是发生在nextTick()之后）
这个方法作用是当数据被修改后，使用该回调方法获取更新后的dom并再次render出来

2.videoUrl给个默认值

如果上面还是报错，那就给个默认值，这样就不会出现报错，请求到数据以后直接通过ref去赋值就可以了