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

Question

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

Jim*_*per 6 filesystems android google-chrome html5-video

我正在尝试创建一个离线视频播放器,可以从我的网站下载视频内容,以便以后通过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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Uda*_*mal 0

问题看起来像是您的android chrome无法正确访问android文件系统，为此您可以使用nanoHttpd服务器来访问设备或sdcard中的android本地文件。对于 NanoHttpd 服务器，在您的应用程序中使用这一类并将媒体文件位置传递为http://localhost:8081/sdcard/(your_media_location).mp4

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

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

尝试将 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>

Run Code Online (Sandbox Code Playgroud)

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

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

Android 上的 HTML5 <video> 元素无法播放

归档时间：	13 年，5 月前
查看次数：	2464 次
最近记录：	13 年，4 月前