4

重现问题:

  1. 通过 XMLHTTPRequest 从服务器获取视频作为 blob。

  2. 在本地沙盒文件系统上保存每个 FileSystem API。

  3. 使用“FileEntry.toURL”方法创建视频标签。

  4. 尝试在 Android Chrome 上玩 -> 失败

  5. 尝试在桌面 Chrome 上玩 -> 运行

在我看来,这是一个非常重要的功能。因为如果视频加载正常,我们完全有可能在智能手机和平板电脑上实现离线媒体应用程序,而无需依赖本地代码。

下载似乎正在运行。但是浏览器无法播放文件系统中的视频。我尝试了与图像相同的用例。这是有效的。请参阅http://sobek-agency.com/html5-file-api/上的示例

http://sobek-agency.com/html5-file-api/

源代码:

<!DOCTYPE html > 
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var _fs;

var imagefilename = "st-logo.png";
var videofilename = "st-is-coming.webm";

var diskSpaceRequired = 20 * 1024 * 1024;

window.requestFileSystem = 窗口.requestFileSystem || window.webkitRequestFileSystem;

函数 errorHandler(e) {
var msg = '';

switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:

休息;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
休息;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
休息;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
休息;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
休息;
默认值:
msg = '未知错误';
休息;
};
安慰。
}

function downloadImageAndVideo(fileEntry) {

console.log('fetch image resource');
_fs.root.getFile(imagefilename, { create: true }, function (fileEntry) {
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", imagefilename, true);
xhr. onload = function(e) {
if (this.status == 200) {
var movieBlob = this.response;
fileEntry.createWriter(function (fileWriter) {
fileWriter.write(movieBlob);
fileWriter.onwriteend = function(e) {
var src = fileEntry.toURL();
$('body').append('<h3>通过 Filesystem API 加载图像正常工作(在 Android Chrome 上!):</h3><img height="150px" src="' + src + '" />< br/><span id="imgInfo"></span><br/>');
};
},错误处理程序);
}
};
xhr.send();
});

console.log('获取视频资源');
_fs.root.getFile(videofilename, { create: true },
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", videofilename, true);
xhr.onload = function(e) {
if (this.status == 200) {
var movieBlob = this.response;
fileEntry.createWriter(function (fileWriter) {
fileWriter.write(movieBlob); fileWriter.onwriteend
= function(e) {
var src = fileEntry.toURL();
$('body').append('<h3>无法通过文件系统加载视频(在 Android Chrome 上!)</h3><video controls><source src="' + src + '" type="video/ webm"/></video><br/><span id="videoInfo"></span><br/>');
};
},错误处理程序);
}
};
xhr.send();
});

}

//请求配额和持久化存储
$(document).ready(function () {
window.webkitStorageInfo.requestQuota(
PERSISTENT,

function (grantedBytes) {
window.requestFileSystem(PERSISTENT,grantedBytes, function(fs) {
_fs = fs;
downloadImageAndVideo();
}, errorHandler);

},
错误处理程序
);
});

</script>
<title>foo</title>
</head>
<body>
</body>
</html>
4

1 回答 1

1

我已确认该问题在最新的 Android 版 Chrome 上可重现。
但显然它已被修复,并且正在开发最新版本。(没有更新,但这似乎是相同的错误http://crbug.com/173588

请等待固定版本在几个月后公开。

于 2013-03-27T09:17:17.077 回答