Reproduce the problem:
Fetch a video through XMLHTTPRequest from server as blob.
Save per FileSystem API on local sandbox filesystem.
Create video tag with "FileEntry.toURL"-method.
Try to play on Android Chrome -> fails
Try to play on Desktop Chrome -> runs
In my opinion it's a very important feature. Because if video loading is working we have the full possibility to implement offline media apps on smartphones and tablets without a native code dependency.
The download seems to be working. But the browser cannot play the video from filesystem. I tried the same use case with images. This is working. see the example at http://sobek-agency.com/html5-file-api/
see http://sobek-agency.com/html5-file-api/
Source code:
<!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 = window.requestFileSystem || window.webkitRequestFileSystem;
function errorHandler(e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = 'Unknown Error';
break;
};
console.log(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>Image loading through Filesystem API is working (on Android Chrome!):</h3><img height="150px" src="' + src + '" /><br/><span id="imgInfo"></span><br/>');
};
}, errorHandler);
}
};
xhr.send();
});
console.log('fetch video resource');
_fs.root.getFile(videofilename, { create: true }, function (fileEntry) {
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>Video loading through Filesystem is not working (on Android Chrome!)</h3><video controls><source src="' + src + '" type="video/webm"/></video><br/><span id="videoInfo"></span><br/>');
};
}, errorHandler);
}
};
xhr.send();
});
}
//request quota and persistent storage
$(document).ready(function () {
window.webkitStorageInfo.requestQuota(
PERSISTENT,
diskSpaceRequired,
function (grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, function(fs) {
_fs = fs;
downloadImageAndVideo();
}, errorHandler);
},
errorHandler
);
});
</script>
<title>foo</title>
</head>
<body>
</body>
</html>
