video.js
问题：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去赋值就可以了
