'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.

htmlvideo.js


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 misterben

Related Questions