XHR加載視頻

沒有深入瞭解爲什麼我使用XHR的細節，誰能告訴我如何讓下面的工作這樣做？我的目標是首先加載視頻數據，然後將其放入視頻標籤的源代碼中。XHR加載視頻

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
window.onload = function() { 
    var elem = document.getElementById("myVideo"); 
    var req = new XMLHttpRequest(); 
    req.onload = function() { 
     var blob_uri = URL.createObjectURL(this.response); 
     elem.appendChild(document.createElement("source")) 
      .src = blob_uri; 
    }; 
    req.responseType = "blob"; 
    req.open('GET', 'http://www.latentmotion.com/player/h264/clips/16154_2832659676_170_180.mp4', false); 
    req.send(null); 
}; 
</script> 
</head> 
<body> 
<video id="myVideo" width="600" height="334" controls></video> 
</body> 
</html>

來源

2011-05-13 Matrym

參考this workaround谷歌瀏覽器，直到的responseType = 「斑點」中實現。

- Me, responding to your same question.

如果你看過我的全部答案和鏈接，你會看到谷歌瀏覽器其實不支持responseType = "blob"呢。我給了你一個假設的實現，並使用responseType = "arraybuffer"將你與一個解決方法聯繫起來。

來源

2011-05-15 04:33:02

感謝您花時間回覆。我閱讀了您的筆記和鏈接，指向Chrome的解決方法，但預計Firefox會在沒有解決方法的情況下運行。 – Matrym 2011-05-16 18:08:30

您這裏有兩個問題，

req.responseType = "blob";應該req.open(...)
你正在做一個跨站點請求，這可能會失敗，出於安全原因來後。

您應該也URL.revokeObjectURL一旦你設置的網址。請注意，在Chrome中，他們仍然有webkitURL而不是URL。

來源

2012-03-08 13:19:15 Yuval

XHR加載視頻

回答

相關問題