CODEWITHSUNDEEP
htmlvideo.js
Neo Anderson
Neo Anderson

Reputation: 67

videojs - No compatible source was found for this media

I have a webpage that that I would load first then the videos after the page is loaded. To do this, I am using the video tag

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

The funciton I am using to do this is:

$( 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();

    }
}

When the page loads, I see the first frame but I get an error, both in the video player and in the console, "No compatible source was found for this media". I believe this error occurs because, when the page initially loaded, the video tag did not have a source. Is there a way to have the video tag recognize that it now has a source? The .load() is not working for me.

Upvotes: 4

Views: 13493

Answers (1)

misterben
misterben

Reputation: 7821

I wouldn't misuse source like that, the video el will already be in an errored state when Video.js initialies. Rather do something more like this

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

Using the <video-js> element makes sure the browser isn't trying to load any video, or treat the el as a video before it's ready.

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

Once Video.js is initiased, use its API to load sources. load() is almost never necessary and can introduce problems, Video.js calls .load() on the video el if needed.

Upvotes: 1

Related Questions