Tôi đang cố gắng tạo trình phát video ngoại tuyến có thể tải xuống nội dung video từ trang web của tôi để xem ngoại tuyến sau qua phần tử video HTML5. Mã bên dưới hoạt động tốt trong Chrome dành cho máy tính để bàn nhưng không hoạt động trên thiết bị di động (điện thoại thông minh Nexus S, máy tính bảng Nexus 7, 4.1 vì chỉ chạy Chrome, được yêu cầu cho api hệ thống tệp). Tôi đang sử dụng API hệ thống tệp được chrome hỗ trợ trên cả máy tính để bàn và thiết bị di động.Phát video từ Hệ thống tệp Chrome Không hoạt động trên Android
Tôi đã xác nhận rằng tệp đó đang lưu trữ chính xác tệp trên thiết bị di động và tôi có thể truy xuất tệp chính xác nhưng vì một số lý do sau khi truy xuất video từ chrome hệ thống không muốn phát video. Điều này đúng cho dù tôi đang sử dụng phần tử video html5 hay tôi đang điều hướng trực tiếp đến URL hệ thống tệp. Khi tôi sử dụng phần tử video html5, nó trả về lỗi media_err_not_supported. Tôi đã xác nhận rằng thiết bị có thể phát video nếu tôi điều hướng trực tiếp đến nó trên máy chủ của tôi (không lưu trữ trước tiên bằng api hệ thống tập tin), vì vậy vấn đề không phải là vấn đề về codec hoặc video. Tôi cũng đang sử dụng loại mime video/mp4 trong cả hai trường hợp.
Một lần nữa, tính năng này hoạt động trên máy tính để bàn nhưng không hoạt động trên thiết bị di động. Bất kỳ ý tưởng?
Đây là mã chúng tôi đang sử dụng:
<!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>
là gì đường dẫn đầy đủ đến tệp khi nó đã được tải xuống? Bạn có chắc chắn có thể chơi tập tin * đó *, trái ngược với một bản sao được tải xuống riêng ở nơi khác không? –
Khi cuộc gọi được thực hiện tới fileEntry.toURL() trong đoạn mã trên, nó trả về một URL như thế này: filesystem: mydomain.com/persistent/test3.mp4. Và, vâng, nếu tôi điều hướng trực tiếp đến URL mà nó đang tải xuống từ (mydomain.com/trailer.mp4 trong ví dụ trên), nó sẽ phát video tốt. –
Xem bạn có thể phát video không. Lấy nó ra khỏi thiết bị và chơi nó hoặc chơi nó từ một trình phát phim trên thiết bị. –