將視頻從客戶端發送到服務器

Question

我最近閱讀了有關File API的信息，該文件API允許客戶端使用網站中文件系統中的文件。

我做了所有添加文件輸入標簽，讀取文件和所有內容的工作。

我使用FileReader將文件讀取為ArrayBuffer並在其上使用了Uint8Array視圖，然后將視圖發送到服務器。

我嘗試使用txt，pdf和圖像，但效果很好。 但是，當將它與視頻文件一起使用時，計算機卻滯后了，我什至沒有等待並關閉瀏覽器！

這是代碼

為什么視頻文件會出現延遲，有辦法避免這種情況嗎？

Answer 1

我遍歷了代碼，您將讀取的數據追加到數組中，這可能是它滯后的原因。

您需要分塊上傳視頻。 要制作您選擇的文件塊，您可以在此處查看HTML5文件閱讀器API

  function readBlob(opt_startByte, opt_stopByte) {
    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
    }

    document.querySelector('.readBytesButtons')
      .addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);

您需要根據需要進行修改。 在這里，當您獲得塊時，請求上傳或播放它。

您也可以在這里播放視頻文件在這里上傳視頻文件進行測試

希望這能解決您的問題。 為了使此工作正常進行，您還需要在后端正確處理這些塊。