video.js 播放m3u8 问题 【No compatible source was found for this media.】 【nextTick】

首先是这个问题呢

No compatible source was found for this media. // 找不到此媒体的兼容源

原因

官方解释

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更

意思呢就是动态赋值完后不是立即就能赋值的。

最这问题呢是因为我们动态赋值的时候dom获取的是以前的【没有赋值之前的dom】

解决办法 【nextTick】

  that.$nextTick(() => {
          //将此操作放在nextTick中  这样【获取到的就是我们赋值视频路径后的dom】
            videojs(
              "my-video",
              function() {
                that.play();
              }
            );
          });

【nextTick】用法和原理

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
简单来说nextTick就是用来处理修改数据之后就能拿到更改完数据的dom!

//举个例子 
this.chuz = “我是初始值”

//我们获取这个值的dom(获取前先给赋值个新数据)
this.chuz = “我是更改后的”
直接获取dom  //我们拿到的值任然是【我是初始值】
that.$nextTick(() => {
       放在nextTick中获取dom  //我们拿到的值是【我是更改后的】
});

那么今天的nextTick Git到了吗？

再见各位溜了 玩去了！