【发布时间】：2012-08-10 05:24:13
【问题描述】：
我正在尝试创建一个离线视频播放器，它可以从我的网站下载视频内容，以便以后通过 HTML5 视频元素离线观看。下面的代码在桌面版 Chrome 中运行良好，但在移动设备上却不行（Nexus S 智能手机、Nexus 7 平板电脑、4.1，因为只有运行 chrome，这是文件系统 api 所必需的）。我在桌面和移动设备上使用 chrome 支持的文件系统 API。
我已确认它已将文件正确存储在移动设备上，并且我可以正确检索文件，但由于某种原因，从本地系统 chrome 检索视频后不想播放视频。无论我是使用 html5 视频元素还是直接导航到文件系统 URL，这都是正确的。当我使用 html5 视频元素时，它返回错误 media_err_not_supported。我已经确认，如果我在我的服务器上直接导航到该设备（无需先使用文件系统 api 存储它），该设备可以播放视频，因此问题不是编解码器或视频格式问题。在这两种情况下，我也使用 video/mp4 mime 类型。
同样，这适用于桌面，但不适用于移动设备。有什么想法吗？
这是我们正在使用的代码：
<!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 filename = "test3.mp4";
var diskSpaceRequired = 10 * 1024 * 1024;
$(document).ready(function () {
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onInitFs(fs) {
_fs = fs;
getVideo(fs);
}
if (!!window.requestFileSystem) {
window.webkitStorageInfo.requestQuota(
window.webkitStorageInfo.PERSISTENT,
diskSpaceRequired, // amount of bytes you need
function () { },
function () {}
);
window.requestFileSystem(window.PERSISTENT, diskSpaceRequired, onInitFs, function () { alert('error'); });
} else {
alert('not supported');
}
$("#play").on('click', playVideo);
$("#ourVideo").on('error', function(e) { console.log('ERROR!!!', e, arguments);
console.log($("#ourVideo")[0].error);
});
});
function playVideo() {
_fs.root.getFile(filename, {}, function (fileEntry) {
$("#ourVideo").attr('src', fileEntry.toURL());
fileEntry.file(function (file) {
var reader = new FileReader();
reader.onloadend = function (e) {
$("#ourVideo").get(0).play();
};
reader.readAsText(file);
}, errorHandler);
}, errorHandler);
}
function getVideo(fs) {
fs.root.getFile(filename, { create: true }, function (fileEntry) {
fileEntry.createWriter(function (fileWriter) {
fetchResource(fileWriter);
}, errorHandler);
}, errorHandler);
}
function errorHandler(e) {
console.log('error', e);
}
function fetchResource(fileWriter) {
console.log('fetchresource');
var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";
xhr.open("GET", "http://mydomain.com/trailer.mp4", true);
xhr.onload = function(e) {
if (this.status == 200) {
var bb = new WebKitBlobBuilder();
bb.append(this.response);
var blob = bb.getBlob("video\/mp4");
fileWriter.write(blob);
} else {
console.log(this.status);
}
};
xhr.send();
}
</script>
<title>foo</title>
</head>
<body>
<input type="button" value="Play Video" id="play"/>
<video id="ourVideo" controls="">
<source id="vidSource" type="video/mp4"/>
</video>
</body>
</html>
【问题讨论】：
-
文件下载后的完整路径是什么？您是否确实能够播放 那个 文件，而不是在别处单独下载的副本？
-
当在上面的代码中调用fileEntry.toURL()时，它会返回一个像这样的URL：filesystem:mydomain.com/persistent/test3.mp4。而且，是的，如果我直接导航到它正在下载的 URL（上面示例中的 mydomain.com/trailer.mp4），它可以正常播放视频。
-
看看能不能播放视频。将其从设备上取下并播放或从设备上的电影播放器播放。
-
内特，视频播放正常。根本问题是浏览器没有将 filesystem:foo.bar/video.mp4 转换为本地文件系统路径，因此 Android 的播放器会在损坏的路径上出错。通过查看 Chromium 错误报告，我认为这已在 Chrome 20.0 中得到修复，但当前的 Android Chrome 仍停留在 18 版。
-
是的，视频播放良好，焦急地等待 Chrome 20.0 的发布。 :)
标签： android google-chrome filesystems html5-video