CHANNELS:

All
C
What could be causing the VIDEOJS ERROR (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) while playing BLOB videos on my website?
General
CodingBuddy posted 2 years ago

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

Want to participate?

Create a free Chris Courses account to begin

or
Sign In

Providing the lift to launch your development career

© 2025 Chris Courses. All rights reserved.