草庐IT

android - 从 Chrome 文件系统播放视频在 Android 上不起作用

coder 2023-12-06 原文

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

我已经确认它正确地将文件存储在移动设备上并且我可以正确检索文件,但由于某种原因从本地系统 chrome 检索视频后不想播放视频。无论我使用的是 html5 视频元素还是直接导航到文件系统 URL,都是如此。当我使用 html5 视频元素时,它返回错误 media_err_not_supported。我已经确认,如果我在我的服务器上直接导航到该设备(无需首先使用文件系统 api 存储它),该设备可以播放视频,因此问题不是编解码器或视频格式问题。在这两种情况下,我都使用了视频/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>

最佳答案

问题看起来像你的 android chrome 无法正确访问 android 文件系统,为此你可以使用 nanoHttpd 服务器访问设备或 sdcard 中的 android 本地文件。 for NanoHttpd server在您的应用程序中使用这一类并将媒体文件位置作为 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>

您可以使用以下方法将 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

关于android - 从 Chrome 文件系统播放视频在 Android 上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11943499/

有关android - 从 Chrome 文件系统播放视频在 Android 上不起作用的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake,如果我把所有东西都放到Rakefile中,它会很大并且很难读取/找到东西,所以我试着将每个命名空间放在lib/rake中它自己的文件中,我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题,但没有任务。我现在只有一个.rake文件作为测试,名为“servers.rake”,它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  3. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

    我的目标是转换表单输入,例如“100兆字节”或“1GB”,并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前,我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效,但前提是输入是倍数(“gigabytes”,而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以,功能正常,

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情? 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中,使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件,我们在StackOverflow上找到一个类似的问题

  5. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  6. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  7. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  8. Ruby 写入和读取对象到文件 - 2

    好的,所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象?所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是,我该如何再次将这个id变回一个对象?我知道我可以自己挑选信息并制作一个接受该信

  9. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件,并创建一个临时验证的url以发送给同事。(理想情况下,这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针,它似乎不符合这个标准,但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  10. ruby - rspec 需要 .rspec 文件中的 spec_helper - 2

    我注意到像bundler这样的项目在每个specfile中执行requirespec_helper我还注意到rspec使用选项--require,它允许您在引导rspec时要求一个文件。您还可以将其添加到.rspec文件中,因此只要您运行不带参数的rspec就会添加它。使用上述方法有什么缺点可以解释为什么像bundler这样的项目选择在每个规范文件中都需要spec_helper吗? 最佳答案 我不在Bundler上工作,所以我不能直接谈论他们的做法。并非所有项目都checkin.rspec文件。原因是这个文件,通常按照当前的惯例,只

随机推荐