在內存中播放html5視頻源

我使用一些ajax查詢檢索多個加密數據，並執行一些操作將所有這些加密塊轉換爲有效的視頻。而現在，我有記憶中的視頻二進制，我卡住了。我如何顯示它？在內存中播放html5視頻源

可以肯定的是，我已經在服務器端複製了所有這些步驟，最終的輸出實際上是一個可播放的視頻。所以我唯一的問題是將我的JavaScript二進制對象顯示爲視頻。

我盡我所能只使用網絡技術（html5，視頻標籤，javascript），我想避免在Flash中開發自己的自定義播放器，這是我最後的解決方案。

如果你有一個想法，我很感興趣。就我而言，我沒有想象力。

2015-08-14 blaazzze

只是爲了檢查我正確理解你，你是說加密的視頻塊被髮送到瀏覽器，之前被解密的JavaScript？如果是這樣的話，解密並不比把車開到街上解鎖還好，鑰匙放在裏面，擋風玻璃上有一個標誌，上面寫着「請不要偷走我」。也就是說，只要視頻足夠短，就可以在視頻元素上拋出一個Base64編碼的dataURL，因爲它是src，它可以工作。我不知道尺寸限制是多少，雖然52MB的mp4可以，但350MB的不是。 – enhzflep

是的，就是這樣。除了訪問頁面是有限的訪問和解密密鑰由用戶定義的事實。我真的很喜歡Base64的想法，我會試試看。它可以工作。 – blaazzze

實際上，加密不是爲了保護內容本身。一旦用戶可以訪問該頁面，他就可以做任何他想做的事情。安全級別是爲了確保服務器無法訪問視頻的內容。這是用戶的財產，我們確認即使我們想要，我們也不能查看他們的文件。所以在進入服務器之前，所有內容都被加密。 – blaazzze

下面是一個簡單的例子，它只是使用文件輸入而不是通常使用的AJAX。請注意，第一個輸入連接到一個讀取文件並返回dataURL的函數。

但是，由於您沒有fileObject，而是具有代表文件內容的數據流，因此不能使用此方法。所以，我已經包含了第二個輸入，它連接到一個只將文件加載爲二進制字符串的函數。然後該字符串在被轉換爲dataURL之前用瀏覽器功能「手動」編碼base64。爲此，您需要知道要處理的文件類型，才能正確構建URL。

這是相當緩慢的，即使這檯筆記本電腦i7的加載和可能吸記憶就像沒有人的業務 - 手機可能會翻倒在昏迷（我沒有一個測試）

你應該能夠（var rawResult = evt.target.result;）

將錯誤檢查留給讀者作爲練習。

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);} 

// callback gets data via the .target.result field of the param passed to it. 
function loadFileObject(fileObj, loadedCallback) 
{ 
    var reader = new FileReader(); 
    reader.onload = loadedCallback; 
    reader.readAsDataURL(fileObj); 
} 

// callback gets data via the .target.result field of the param passed to it. 
function loadFileAsBinary(fileObj, loadedCallback) 
{ 
    var reader = new FileReader(); 
    reader.onload = loadedCallback; 
    reader.readAsBinaryString(fileObj); 
} 


window.addEventListener('load', onDocLoaded, false); 
function onDocLoaded() 
{ 
    byId('fileInput1').addEventListener('change', onFileInput1Changed, false); 
    byId('fileInput2').addEventListener('change', onFileInput2Changed, false); 
} 

function onFileInput1Changed(evt) 
{ 
    if (this.files.length != 0) 
    { 
     var curFile = this.files[0]; 
     loadFileObject(curFile, onVideoFileReadAsURL); 

     function onVideoFileReadAsURL(evt) 
     { 
      byId('vidTgt').src = evt.target.result; 
      byId('vidTgt').play(); 
     } 
    } 
} 

function onFileInput2Changed(evt) 
{ 
    if (this.files.length != 0) 
    { 
     var curFile = this.files[0]; 
     loadFileAsBinary(curFile, onVideoFileReadAsBinary); 

     function onVideoFileReadAsBinary(evt) 
     { 
      var rawResult = evt.target.result; 
      var b64Result = btoa(rawResult); 

      var prefaceString = "data:" + curFile.type + ";base64,"; 
//   byId('vidTgt').src = "data:video/mp4;base64," + b64Result; 
      byId('vidTgt').src = prefaceString + b64Result; 
      byId('vidTgt').play(); 
     } 
    } 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
    <input type='file' id='fileInput1'/> 
    <input type='file' id='fileInput2'/> 
    <video id='vidTgt' src='vid/The Running Man.mp4'/> 
</body> 
</html>

來源

2015-08-14 21:17:50 enhzflep

你的答案是一個很大的幫助。我有類似的東西。我被困在加入多個塊作爲一個獨特的blob。但是當它完成時，我認爲它會起作用。我保持聯繫。謝謝。 – blaazzze

既然你的答案正確適合我的問題，我會將你的信息標記爲答案。但就我而言，我最終將創建自己的自定義Flash播放器，因爲我將對工作流執行一些更改以對加密視頻進行流式處理，而不必將完整視頻保存在內存中（可能從2MB到1GB以上）。但你的回答完全符合我原來的問題，所以謝謝 – blaazzze

非常歡迎你。 :) – enhzflep

要顯示您的視頻，您需要獲取它的URL，以便您能夠將參考傳遞給視頻元素。

有URL.createObjectURL應該爲您提供這樣的URL來引用您的數據。請參閱https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL以獲得進一步解釋，並介紹兼容性表。

Mozilla舉例說明了https://developer.mozilla.org/samples/domref/file-click-demo.html，它顯示本地文件。應該可以改編這個來設置視頻元素的src屬性。根據您存儲數據的方式，應該可以通過這種方式播放視頻。

我在Firefox中試用了一個File對象的數據，這個對象給我留下了一個可用於播放視頻的URL blob:https://developer.mozilla.org/ed2e4f2f-57a6-4b06-8d56-d0a1a47a9ffd。

來源

2015-08-14 20:53:09

在內存中播放html5視頻源

回答

相關問題