【问题标题】：Video Tag Local File Download Cordova Android视频标签本地文件下载 Cordova Android
【发布时间】：2014-02-27 23:34:20
【问题描述】：

我正在尝试下载视频，然后使用 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放到video标签里？

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

按照here 的说明，我让它与开发分支一起工作。

【问题讨论】：

标签： android html video cordova file-transfer

【解决方案1】：

正如您所发现的（几乎是在提交代码后立即 :)）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) 版本包含此功能。不再需要开发分支。

【讨论】：