我正在尝试下载视频,然后使用 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/