重现问题:
通过 XMLHTTPRequest 从服务器获取视频作为 blob。
在本地沙盒文件系统上保存每个 FileSystem API。
使用“FileEntry.toURL”方法创建视频标签。
尝试在 Android Chrome 上玩 -> 失败
尝试在桌面 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>