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