个人中心
gpt4 book ai didi

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

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:45:18 24 4
gpt4 key购买 nike

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

24 4 0
文章推荐： javascript - 使用条件遍历 dom 元素的最佳方法？
文章推荐： iphone - UIScrollView 有许多并排的表格，带有分页
文章推荐： c# - System.Windows.Forms.WebBrowser 不运行 Javascript
文章推荐： android - 我在PopupMenu中使用了ShareActionProvider，却显示了两个PopupMenu？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com