Question

我想知道HTML5 API是否适合这个用例：

公共服务器上有一些视频（例如http://videosanbox.me/video.mpg）
JS / html5应用程序应该在本地存储视频，以便能够脱机播放（视频是公开的，没有安全性）警告）

在我的初步测试中，我无法通过“No'Access-Control-Allow-Origin'”错误。

根据我的理解，以下脚本应该：

请求获取位于指定网址的内容
在某处准备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 

在服务器端，您需要传递此标头：

标题（＆＃39; Access-Control-Allow-Origin：*＆＃39;）;

不幸的是，如果您无法控制videosanbox.me，则可能无法实现。如果没有，请与他们联系，看看他们是否愿意允许这样做。如果没有，请不要担心，有第二个解决方案：

解决方案2

在您自己的服务器上创建一个网页，并允许跨站点脚本（但使用安全性来限制谁可以使用此页面）。在该页面的代码中，它将接受请求并打开与http://videosanbox.me的HTTP连接，检索mpg文件并将其作为Blob反馈回PhoneGap应用程序。您的PhoneGap将通过Ajax而不是http://videosanbox.me连接到此页面（在您的服务器上）。

文件API - 用于存储视频的HTML5应用程序

1 个答案: