This issue appeared after converting some of the mp4 video URLs to BLOBs, the video will not play after clicking on Watch Show. The following error message appears in the Console tab.

https://stackoverflow.com/questions/76331687/what-could-be-causing-the-videojs-error-code4-media-err-src-not-supported-whi

[Error]

Console: VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

[HTML Code]

<a class="btn btn-hover videoID" onclick="enableVideoJS();" data-fancybox="" data-type="video" data-src="blob:https://mywebsite.com/7007535b-a807-4e28-b62b-2274cc9f6f34" href="javascript:;"><i class="fa fa-play mr-1" aria-hidden="true"></i>Watch Show</a> 


After you click Watch Show - uses VideoJS below

<video class="vjs-tech" autoplay="" controlslist="nodownload" disablepictureinpicture="true" poster="" id="vjs-play19_html5_api" tabindex="-1">
<source src="blob:https://mywebsite.com/7007535b-a807-4e28-b62b-2274cc9f6f34" type="video/mp4"></video>

[JavaScript Code]

// Searches DOM for videoID and grabs data-src and sets this as a string
  let attributes = $(".videoID").map(function () { return $(this).attr("data-src"); }).get();

// Create blob looping through attributes length - in this case is 6 video URLS

     for (let i=0; i < attributes.length; i++){
        
        let url = URL.createObjectURL(
           new Blob([attributes[i]], { "type" : "video\/mp4; codecs=\"avc,aac\"" })
        );

        // Update source with blob URL, writing over current values
        attributes[i] = url; 
        $(".videoID").attr("data-src", attributes[i]);

     }

// Output array to console
     console.log(attributes);
     //
     // Console shows URLS converted to BLOB from video/mp4
     //
     // Array(6)
     // 0: "blob:https://mywebsite.com/63d21c8d-5950-42a0-a46d-9eb4d61046e6"
     // 1: "blob:https://mywebsite.com/6ce5a525-e0c4-4a52-ae6a-16298072ba68"
     // 2: "blob:https://mywebsite.com/4f4cf9b8-2699-4936-82de-d5226a2b98de"
     // 3: "blob:https://mywebsite.com/fe6683c7-0865-4d47-8575-bc6a5ecadf8d"
     // 4: "blob:https://mywebsite.com/01b7ee54-ff4d-4bc7-bd2a-1331a71cce27"
     // 5: "blob:https://mywebsite.com/7007535b-a807-4e28-b62b-2274cc9f6f34"

Videos are between 300MB and 1.2GB in size and have posted already on StackOverflow

Any tutorials or guidance will be helpful

Education

Support

Transparency

Legal