File API-用於存儲視頻的HTML5應用

Question

我想知道HTML5 API是否適合此用例：

• 一些視頻存在於公共服務器上（例如http://videosanbox.me/video.mpg ）
• JS / html5應用程序應將視頻存儲在本地，以便能夠離線播放（視頻是公開的，沒有安全警告）

在我的初始測試中，我無法克服“無'Access-Control-Allow-Origin'”錯誤。

以我的理解，以下腳本應：

• 請求並獲取位於給定URL的內容
• 在某處准備1Mb文件（我假設我在這里還會有其他錯誤，但是看到它們時我會到達那里：）

現在，我有興趣了解為什么會發生此錯誤，客戶端（移動瀏覽器）查詢尚不存在的資源不是正常現象嗎？

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://videosanbox.me/video.mpg', true);

xhr.responseType = 'blob';

xhr.onload = function(e) {

  window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
    fs.root.getFile('video.mpg', {create: true}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {

        writer.onwrite = function(e) { alert('writing'); };
        writer.onerror = function(e) { alert('error'); };

        var blob = new Blob([xhr.response], {type: 'video/mpg'});

       writer.write(blob);

      }, onError);
    }, onError);
  }, onError);
};

xhr.send();

onError只是在發生錯誤的情況下做一些事情：function onError（e）{console.log（'Error'，e）;}

Answer 1

解決方案1

在服務器端，您需要傳遞以下標頭：

header（'Access-Control-Allow-Origin：*'）;

不幸的是，如果您無法控制videoanbox.me，則可能無法實現。 如果不是，請與他們聯系，看看他們是否願意這樣做。 如果沒有，請不用擔心，還有第二種解決方案：

解決方案2

在您自己的服務器上創建一個網頁，並允許跨站點腳本編寫（但請使用安全性來限制誰可以使用此頁面）。 在該頁面的代碼中，它將接受請求並打開與http://videosanbox.me的HTTP連接，檢索mpg文件並將其作為Blob吐回到PhoneGap應用程序中。 您的PhoneGap將通過Ajax而不是http://videosanbox.me連接到此頁面（在服務器上）。