I am not able to play MP4 (HD) video on UI received from the django backend. I am using normal javascript on UI and Django on the backend. Please find the backend code snippet:
file = FileWrapper(open(path, 'rb')) #MP4 file path is media/1648477263566_28-03-2022 19:51:05_video.mp4
response = HttpResponse(file, content_type=content_type)
response['Content-Disposition'] = 'attachment; filename=my_video.mp4'
return response
The video plays perfectly on Postman but cant play on the UI screen. The UI code is below:
function getUploadedImageAndVideo(combined_item_id){
request = {}
request["combined_item_id"] = combined_item_id;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
vdata = this.responseText;
var src1 = document.getElementById('src1');
src1.setAttribute("src", "data:video/mp4;base64,"+vdata);
//src1.setAttribute("src", vdata); //doesnt work either
var src2 = document.getElementById('src2');
src2.setAttribute("src", "data:video/mp4;base64,"+vdata);
//src2.setAttribute("src", vdata); //doesnt work either
return
}
}
xhttp.open("POST", port + host + "/inventory_apis/getUploadedImageAndVideo", true);
xhttp.setRequestHeader("Accept", "video/mp4");
xhttp.setRequestHeader("Content-type", "application/json");
xhttp.setRequestHeader("X-CSRFToken", getToken());
xhttp.send( JSON.stringify(request) );
}
on html side:
<video controls="">
<source type="video/webm" src="" id="src1">
<source type="video/mp4" src="" id="src2">
</video>
Network Response (200 OK) of function call is: "ftypmp42 ... isommp42 ... mdat ... ó! ... °}b ... $¥Ð ..." very long text of the video. I am not able to play video on the UI Side. Please Help. Browser used: Chrome and Mozilla.
*An alternative is to directly play from media url but here I want to edit video on backend itself on purpose. So I’m stuck on this issue.
Looking at "ftypmp42 ... isommp42 ... mdat ... ó! ... °}b ... $¥Ð ..."
MP4 is divided into two parts.
First is MOOV for metadata (which needs to be processed, before playback can begin). For example the metadata tells all the byte positions of all the different frames, without this metadata then the decoder cannot begin playback.
Second is MDAT which is the actual media data (the audio/video data without headers, since such info now exists in MOOV instead).
It seems your video has MDAT appearing first so you must wait for the MDAT bytes to pass through before you reach the metadata. In other words, your file must be completely downloaded before it can play.
Solution:
Use a tool to move your MOOV atom to the front of file. You can try commandline tools like FFmpeg or MP4Box or an app like Handbrake.