Vue JS 和 Video JS“提供的 ID 无效”错误答案

【问题标题】：Vue JS and Video JS "ID supplied is not valid" errorVue JS 和 Video JS“提供的 ID 无效”错误
【发布时间】：2020-08-27 15:35:13
【问题描述】：

我有一个基本项目，运行 vue.js 和 laravel，但我需要在所有浏览器上播放 HLS 视频，所以看了之后我决定使用 视频-js。

我已经通过 npm 成功安装了视频播放器，并尝试复制以下指南：https://docs.videojs.com/tutorial-vue.html

但我不断收到以下控制台错误：

[Vue 警告]：挂载钩子中的错误：“TypeError：元素或 ID 提供的无效。 (videojs)"

为什么这对我不起作用？

我已将我的代码上传到 github： https://github.com/samB67/VueVideoJS/blob/master/VideosView.vue

Mp4 视频有效，但 HLS 视频无效

【问题讨论】：

你在你的模板上写正确的ref="videoPlayer"吗？
是的，我先检查了一下，可以确认所有的拼写都正确！
我已将我的 vue 组件上传到 github @ 如下：github.com/samB67/VueVideoJS/blob/master/VideosView.vue

标签： laravel vue.js npm video-streaming video.js

【解决方案1】：

<video-js> 不是组件。请改用 video html 标签和 ref。

<video ref="Player" class="vjs-default-skin" controls preload="auto" width="640" height="268">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

在脚本部分：

mounted() {
   videojs(this.$refs.Player);
}

【讨论】：

太好了，它适用于 mp4 视频，但不适用于 HLS 视频类型。我是否需要为 HLS 视频添加其他内容？我已更新 Github 以反映我的更改，谢谢 (github.com/samB67/VueVideoJS/blob/master/VideosView.vue)

【解决方案2】：

对于 HLS 视频尝试添加 type="application/x-mpegURL" 作为属性

类似这样的：

【讨论】：