videojs-找不到此媒体的兼容源

Question

我有一个网页，我会先加载它，然后加载页面后再加载视频。要做到这一点，我正在使用视频标签

<video id="video1" class="video-js vjs-default-skin">
<source class="source" data-src="urlForVideo" type="video/mp4" />
</video>

我使用的功能是：

$( document ).ready(function() { 
let loadedVideos = $(".video-js");
let loadedSources = $(".source");
for (let i = 0; i <= loadedVideos.length - 1; i++) {
let vidId = loadedVideos[i].id;
loadedSources[i].src = loadedSources[i].dataset.src;
videojs(vidId).load();
}
}

当页面加载时，我看到第一帧，但在视频播放器和控制台中都出现了错误，"；找不到此媒体的兼容源"；。我相信出现这个错误是因为，当页面最初加载时，视频标签没有来源。有没有办法让视频标签识别出它现在有了来源？.load((对我不起作用。

Answer 1

我不会那样滥用源代码，当video.js初始化时，视频el已经处于错误状态。不如做一些更像的事情

<video-js data-source="https://example.com/file.mp4" data-type="video/mp4" ...

使用<video-js>元素可以确保浏览器不会试图加载任何视频，或者在el准备好之前将其视为视频。

videojs(vidId).ready(function() {
this.src({
src: this.el().dataset.source,
type: this.el().dataset.type
});
});

Video.js启动后，使用其API加载源代码。load()几乎从来都不是必要的，并且可能会带来问题，如果需要，Video.js会在视频el上调用.load()。