What could be causing the VIDEOJS ERROR (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) while playing BLOB videos on my website?

Question

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 messaged appears in the Inspect Element in Console tab.

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:

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

JScript: // Grab all videoID class URL in DOM - Currently 6 videos with Class of videoID let attributes = $(".videoID").map(function () { return $(this).attr("data-src"); }).get();

     // 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"


     // 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]);

     }

Searched articles on BLOB and MediaSources to see what I was missing, the video themselves are around 300MB - 1.2GB in size. The idea was to hide the URL source location, from the error it seems to be a codec issue but not sure as I specifically called the mime type for the video format

What would be the best approach to solving this problem, thanks?

Answer 1

Looking at:

new Blob([attributes[i]], { "type" : "video\/mp4; codecs=\"avc,aac\"" })

You cannot create a blob from a text String. It must be a collection of byte values (ie: an Array). This is because your attributes array slots have texts like "blob:https:// ...etc instead of having arrays.

See if the test below allows your links in attributes array to play as video.

//## 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"

//## Update source with blob URL, writing over current values
let myVid = document.getElementById("vjs-play19_html5_api"); //get video object
myVid.src = attributes[ 4 ]; //test vid #4 from the list;
myVid.load(); myVid.play(); //must load any new URL before playing