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

Question

我正在尝试下载视频，然后使用apache Cordova 3.4.0播放它，但我不知道是否可以使用视频标记。有一些插件适用于使用视频标签，如
Html5Video但它需要视频文件存在于app文件夹中。还有其他插件使用其他播放器并使用文件路径加载文件，但由于文件下载现在使用Html5网址，而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>

正在正确下载该文件，但是如何在下载后获得fullPath？或者将其移至我的cordova文件夹以将网址放入视频标记？

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

我按照here所解释的那样与dev分支机构合作。

Answer 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）包含此功能。不再需要Dev分支。

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

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

1 个答案: