android - 视频标签本地文件下载 Cordova Android

标签 android html video cordova file-transfer

我正在尝试下载视频,然后使用 apache Cordova 3.4.0 播放它,但我不知道是否可以使用视频标签。有一些插件可用于使用视频标签,例如
Html5Video但它需要视频文件存在于应用程序文件夹中。还有其他插件使用其他播放器并使用文件路径加载文件,但由于文件下载现在使用 Html5 url,并且 fullPath 给了我文件系统的真实路径,所以真的不可能知道文件保存在哪里,或提供给视频播放器的路径。有没有办法访问应用程序文件夹位置并将视频以 cordova 可以找到并播放的方式放置?

这是我目前所拥有的,但我不知道如何找到视频。

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
            <div id="video_container">
                Loading Video...
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();

            document.addEventListener("deviceready", onDeviceReady, false);

            // device APIs are available
            //
            function onDeviceReady() {
                console.log('Requesting file system');
                window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
            }

            function gotFS(fileSystem) {
                fileSystem.root.getDirectory("vids", {create: true}, gotDir);
            }

            function gotDir(dirEntry) {
                dirEntry.getFile("some_video.mp4", {create: true, exclusive: false}, gotFile);
            }

            function gotFile(fileEntry) {
                var localPath = fileEntry.fullPath;
                var localUrl = fileEntry.toURL();

                console.log('Loaded local path: ' + localPath);
                console.log('Loaded local url: ' + localUrl);

                var fileTransfer = new FileTransfer();
                var uri = encodeURI('http//site/with/video.mp4');
                console.log('Downloading ' + uri + ' to ' + localPath);

                fileTransfer.download(
                    uri,
                    localUrl,
                    function(entry) {
                        console.log('download complete (path): ' + entry.fullPath); // Returns '/vids/some_video.mp4'
                        console.log('download complete (url): ' + entry.toURL()); // Returns 'cdvfile://localhost/persistent/vids/some_video.mp4'
                        document.getElementById('video_container').innerHTML = 
                        'Downloaded Video path: ' + entry.fullPath + '<br />'
                        + 'Downloaded Video url: ' + entry.toURL() + '<br />'
                        + '<video width="100%" height="300" controls>' 
                        + '<source src="' + entry.toURL() + '" type="video/mp4">'
                        + '</video>';
                        console.log('Wrote video player');
                    },
                    function(error) {
                        console.log('download error source ' + error.source);
                        console.log('download error target ' + error.target);
                    }
                );
            }

            function fail(error) {
                console.log('Error creating file [' + error.name + ']: ' + error.message);
            }
        </script>
    </body>
</html>

文件正在正确下载,但下载后如何获得完整路径?或者将其移动到我的 cordova 文件夹以将 url 放入视频标签中?

!!!我找到了解决方案 !!!!

我按照说明在开发分支上使用了它 here .

最佳答案

如您所见(几乎是在提交代码之后:))File 的 dev 分支向 FileEntry 对象添加了一个方法 .toNativeURL()。您可以使用它来获取适合标记源的 URL。

最简单的代码是这样的:

requestFileSystem(TEMPORARY, 0, function(fileSystem) {
    var ft = new FileTransfer();
    ft.download(uri, fileSystem.root.toURL() + "/" + filename, function(entry) {
        document.getElementById('video_container').innerHTML = 
              'Downloaded Video path: ' + entry.fullPath + '<br />'
            + 'Downloaded Video url: ' + entry.toURL() + '<br />'
            + '<video width="100%" height="300" controls>' 
            + '<source src="' + entry.toNativeURL() + '" type="video/mp4">'
            + '</video>';
    });
});

更新:截至 3 月 4 日,已发布的文件插件版本 (1.0.1) 包含此功能。不再需要 Dev 分支。

关于android - 视频标签本地文件下载 Cordova Android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22083023/

相关文章:

android - 相对布局中的元素在应用程序运行时显示不同

html - 如何在 Bootstrap 3 中删除这个水平滚动条

javascript - 如何使用Ajax将图像存储到文件夹并存储数据库路径?

javascript - CKEditor editor.resize() 在 jQuery 中不起作用

javascript - 有没有可以运行的videojs + rtmp示例?

video - 如何将 ffmpeg 格式映射到 MIME 类型和文件扩展名?

bash - 使用 FFmpeg 将视频分割成等长的片段

android - 时代广场日历XML文件错误

android - Android Nougat 中的文件系统更改

android - 将子项目中的本地构建依赖于根项目中的 proguard