Question

我正在尝试创建一个离线视频播放器，可以从我的网站下载视频内容，以便以后通过HTML5视频元素离线观看。以下代码适用于桌面Chrome，但不适用于移动设备（Nexus S智能手机，Nexus 7平板电脑4.1，因为只运行Chrome，这是文件系统API所必需的）。我在桌面和移动设备上使用chrome支持的文件系统API。

我已经确认它正确地将文件存储在移动设备上，我可以正确检索文件，但出于某种原因，从localsystem检索视频后，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>

Answer 1

问题看起来像你的android chrome coudn没有正确访问android文件系统，为此你可以使用nanoHttpd服务器访问设备或SD卡中的android本地文件。 for NanoHttpd server在您的应用中使用此一个类，并将媒体文件位置传递为http://localhost:8081/sdcard/(your_media_location).mp4

或从https://gist.github.com/1893396获取nanoHttpd

我认为访问SD卡文件比直接调用它们更准确

尝试将html部分更改为

</head>
<body>


    <input type="button" value="Play Video" id="play"/>
        <video id="ourVideo" controls="">                
             <source src="video1.mp4" type= "video/mp4">
             <source src="video1.ogv" type= "video/ogg">
        </video>

</body>

你可以使用你的mp4转换为ogv http://video.online-convert.com/convert-to-ogg 并将ogv文件放在mp4中的相同位置

**了解更多信息，请查看这些内容 http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

HTML5 <video> element on Android does not play

从Chrome文件系统播放视频无法在Android上运行

1 个答案: