No puedo reproducir video MP4 (HD) en la interfaz de usuario recibida del backend de django. Estoy usando javascript normal en UI y Django en el backend. Encuentre el fragmento de código de back-end:
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 responseEl video se reproduce perfectamente en Postman, pero no se puede reproducir en la pantalla de la interfaz de usuario. El código de la interfaz de usuario está a continuación:
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) ); }en el lado html:
<video controls=""> <source type="video/webm" src="" id="src1"> <source type="video/mp4" src="" id="src2"> </video>La respuesta de red (200 OK) de llamada de función es: "ftypmp42 ... isommp42 ... mdat ... ó! ... °}b ... $¥Ð ..." texto muy largo del video. No puedo reproducir video en el lado de la interfaz de usuario. Por favor ayuda. Navegador utilizado: Chrome y Mozilla.
* Una alternativa es reproducir directamente desde la URL de los medios, pero aquí quiero editar el video en el backend a propósito. Así que estoy atascado en este tema.
Mirando "ftypmp42 ... isommp42 ... mdat ... ó! ... °}b ... $¥Ð ..."
MP4 se divide en dos partes.
Primero está MOOV para metadatos (que deben procesarse antes de que pueda comenzar la reproducción). Por ejemplo, los metadatos indican todas las posiciones de bytes de todos los diferentes fotogramas; sin estos metadatos, el decodificador no puede comenzar la reproducción .
El segundo es MDAT, que son los datos multimedia reales (los datos de audio/video sin encabezados, ya que dicha información ahora existe en MOOV).
Parece que su video tiene MDAT apareciendo primero, por lo que debe esperar a que pasen los bytes MDAT antes de llegar a los metadatos. En otras palabras, su archivo debe estar completamente descargado antes de que pueda reproducirse.
Solución :
Use una herramienta para mover su átomo MOOV al frente del archivo. Puede probar herramientas de línea de comandos como FFmpeg o MP4Box o una aplicación como Handbrake.