android - Android Chrome无法通过Filesystem API播放或加载视频

重现问题：

通过XMLHTTPRequest从服务器获取视频作为blob。
在本地沙箱文件系统上保存每个FileSystem API。
使用“FileEntry.toURL”-method创建视频代码。
尝试在Android Chrome上玩 - ＆gt;失败
尝试在桌面Chrome上播放 - ＆gt;运行

在我看来，这是一个非常重要的特征。因为如果视频加载工作正常，我们就有可能在智能手机和平板电脑上实现离线媒体应用，而不依赖于本机代码。

下载似乎正在运行。但是浏览器无法播放来自文件系统的视频。我尝试了与图像相同的用例。这很有效。请参阅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 = 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>

Android Chrome无法通过Filesystem API播放或加载视频

1 个答案: