2011-05-13 179 views
3

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

http://jsfiddle.net/u2vhG/

<!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> 

回答

1

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

- Me, responding to your same question.

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

+0

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

0

您這裏有兩個問題,

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

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