Проблема с воспроизведением видео в пользовательском интерфейсе, но отлично работает на Postman

Я не могу воспроизвести видео MP4 на UI, полученное с бэкенда django. Я использую обычный javascript на UI и Django на бэкенде. Пожалуйста, найдите фрагмент кода бэкенда:

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

Видео отлично воспроизводится на Postman, но не может воспроизводиться на экране UI. Код пользовательского интерфейса приведен ниже:

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);
        //myVid.setAttribute("src", vdata); //doesnt work either

        var src2 = document.getElementById('src2');
        src2.setAttribute("src", "data:video/mp4;base64,"+vdata);
        //myVid.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) );
}

на стороне html: 

  <video controls="">
    <source type="video/webm" src="" id="src1">
    <source type="video/mp4" src="" id="src2">
  </video>

Сетевой ответ вызова функции: "ftypmp42 ... isommp42 ... mdat ... ó! ... °}b ... $¥Ð ..." очень длинный текст видео.

Я не могу воспроизвести видео на стороне пользовательского интерфейса. Пожалуйста, помогите. Используемые браузеры: Chrome и Mozilla.

Смотрит на "ftypmp42 ... isommp42 ... mdat ... ó! ... °}b ... $¥Ð ..."

MP4 разделен на две части.

Первым является MOOV для метаданных (которые должны быть обработаны, прежде чем начнется воспроизведение). Например, метаданные указывают все позиции байтов всех различных кадров, без этих метаданных декодер не может начать воспроизведение .

Второй - MDAT, который является фактическими медиа данными (аудио/видео данные без заголовков, поскольку такая информация теперь существует в MOOV).

Похоже, в вашем видео MDAT появляется первым, поэтому вы должны подождать, пока байты MDAT пройдут через него, прежде чем вы достигнете метаданных. Другими словами, ваш файл должен быть полностью загружен прежде чем он сможет воспроизводиться.

Решение:
Используйте инструмент для перемещения атома MOOV на передний план файла. Вы можете попробовать инструменты командной строки, такие как FFmpeg или MP4Box, или приложение, такое как Handbrake.

Вернуться на верх