文章/答案/技术大牛

发布

社区首页 >问答首页 >cordova-plugin-file用于播放extSD的视频文件

问cordova-plugin-file用于播放extSD的视频文件
EN

Stack Overflow用户

提问于 2017-03-03 06:38:39

回答 1查看 2.3K关注 0票数 1

我需要让我的cordova包装html显示一个图片，并运行一个视频文件，位于外部SD的根部。在cordova-插件文件的git集线器上，似乎没有地方可以问这些问题。

我不确定如果文件位于根之外的这两个子目录中，我不知道在下面的2B&C中使用什么路径来完成这个任务？

如果我只需要访问ext SD，那么所有这些值是否都是必需的？

到目前为止我从文件中知道的是..。但是很明显，我没有得到所有的正确，因为我得到了错误(见下文)

1)从CMD线建立环境。

    cordova create MyApp
    cd /MyApp
    cordova platform add android@latest
    cordova plugin add cordova-plugin-whitelist
    cordova plugin add cordova-plugin-file
    corddova build android (after step 3 below)

2)将这些添加到index.html中

( A) cdvfile:内容方案-安全性-索引页的策略元标记，例如：

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap:cdvfile:https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src

( B) <img src="cdvfile:///img/logo.png" />

( C) <p><a href="cdvfile://video/MyVideo.mp4">Play video</a></p>

3)将这些添加到config.xml中

( A) <access origin="cdvfile://*" />

( B) <preference name="AndroidExtraFilesystems" value="files,files-external,documents,sdcard,cache,cache-external,assets,root" />

我在Android上点击视频链接时遇到的错误是.

 net::ERR_UNKNOWN_URL_SCHEME (cdvfile:video/0001_a1.mp4)

===========编辑#1

正在尝试@DaveAlden的推荐..。使用名为[cordova.plugins.diagnostic][2]的插件与此配置一起定位ExtSD上的根路径，播放视频，但得到错误(见下文).

config.xml

 <preference name="android-minSdkVersion" value="14" />

 <preference name="android-targetSdkVersion" value="14" />

 <preference name="android-maxSdkVersion" value="25" />
 <plugin name="cordova-plugin-whitelist" spec="1" />

 <plugin name="cordova.plugins.diagnostic" />

Index.html

<body>

<!-- Set up path to ExtSD on Android -->
<script>
function getSdRefAndEmbed(){
    cordova.plugins.diagnostic.getExternalSdCardDetails(function(details){
    details.forEach(function(detail){
        if(detail.type === "root"){
        cordova.file.externalSdCardRoot = detail.filePath;
        embedMedia();
        }
    });
    }, function(error){
    console.error(error);
    });
}

function embedMedia(){
    $('.extSdVideo').each(function(){
        $(this).attr('href', cordova.file.externalSdCardRoot + $(this).attr('href'));
    });
}

$(document).on('deviceready', getSdRefAndEmbed);
$(document).on('pageinit', embedMedia);
</script>

<!-- Play video file -->
<a class="extSdVideo" href="video/0001_a1.mp4" id="0001_a1"> a1 </a>

</body>

应用程序错误

net::ERR_FILE_NOT_FOUND (file:///android_assest/www/HHR/hhr-cm_cameroon-cm1-fra-spa/‌‌hhr/hhr-cm_cameroo‌n-‌cm1-fra-spa/vide‌o/00‌01_a1.mp4

尝试将0001_a1.mp4放置在这两个目录中的任何一个..。

extSDRoot/video/0001_a1.mp4

和/或

extSDRoot/www/HHR/hhr-cm_cameroon-cm1-fra-spa/‌‌hhr/hhr-cm_cameroo‌n-‌cm1-fra-spa/vide‌o/00‌01_a1.mp4

===================编辑#2

@DaveAlden建议尝试这三种方法..。

1)将console.dir(details)放在getExternalSdCardDetails()中，以查看插件找到了哪些本地路径。

结果:它在错误消息中给出了相同的路径。

Application Error
net::ERR_FILE_NOT_FOUND
(file:///android_asset/www/hhr/cm_cameroon-cm1-fra-spa/0001_a1.mp4)

2)尝试同一设备上的示例项目 (https://github.com/dpa99c/cordova-diagnostic-plugin-example)，以查看ext SD示例是否有效。

结果1:示例项目的构建失败了.

BUILD FAILED Total time: 47.426 secs Error: cmd: Command failed with exit code 1 Error output: F:\DIAGNOSTIC_WORKING\cordova-diagnostic-plugin-example\plat‌forms\android\build\ intermediates\res\merged\debug\values-v24\values-v24.xml:3: AAPT: Error retrievi ng parent for item: No resource found that matches the given name 'android:TextA ppearance.Material.Widget.Button.Borderless.Colored'.

@DaveAlden对建设失败的回应..。

您在构建环境中缺少了/过时的Android组件，并且/或正在使用cordova-android平台的过时版本。请参阅文档(https://github.com/dpa99c/cordova-diagnostic-plugin#building-for-android)和此问题(https://github.com/dpa99c/cordova-diagnostic-plugin/issues/161)。

我的行动：

通过运行以下命令，我检查了，以确保所有API级别对于所需的产品都在相同的级别上

C:> Android -v

Android SDK Tool 25.2.5
SDK platform 25
Android Support Repository 46
Google Play services 39
Google Repository 45

我执行了命令..。

cordova platform check android

得到了这个结果..。

F:\DIAGNOSTIC_WORKING\cordova-diagnostic-plugin-example>cordova platform check android
Subproject Path: CordovaLib
android @ 6.1.2; current did not install, and thus its version cannot be determined

为什么我会得到这个“当前没有安装”？这是否是诊断插件没有为extSD?找到正确路径的问题？

我执行了命令..。

cordova platform rm android && cordova platform add android@latest && cordova build android

现在的构建成功了，例如Project!

参见示例诊断应用程序显示extSD路径的屏幕截图。这个路径看起来与我在应用程序中运行诊断插件时得到的路径非常不同。

注释按钮“编写外部SD文件”按下时没有写任何东西。我向我的文件管理器查询了一下.

为示例Project提供的路径对于诊断插件为我的应用程序提供的路径非常不同(参见下面的路径)。这些结果来自同一星系S7。

net::ERR_FILE_NOT_FOUND (file:///android_assest/www/HHR/hhr-cm_cameroon-cm1-fra-spa/‌‌hhr/hhr-cm_cameroo‌n-‌cm1-fra-spa/vide‌o/00‌01_a1.mp4

我为我的应用程序运行了这个命令，但是没有改变.

cordova platform rm android && cordova platform add android@latest && cordova build android

@DaveAlden建议使用Chrome运行调试。接下来我会这么做的。

找到了这个..。

============= 编辑3使用cordova-诊断插件成功播放了来自extSD的视频

以下是如何..。

最后一个障碍是，由于我有一部安卓6+手机，我还必须添加一个函数来检查读取extSD的运行时权限。代码一直在使用编辑#2中的错误显示(见上面)，就像它试图看到内部路径一样。一旦我添加了函数来检查运行时权限，它最终会给出正确的外部路径。暗示..。仅仅在清单中提供许可是不够的。你可以在这里读到。谢谢@DaveAlden为您的示例项目！

https://github.com/dpa99c/cordova-diagnostic-plugin-android-runtime-example

Android运行时权限 Android6/ API 23引入了运行时权限的概念。与>iOS类似，除了在Android清单中列出之外，还必须在运行时请求某些“危险”权限。运行时权限只适用于运行在应用程序上的设备/模拟器有>Android6.0或更高版本，并且应用程序是使用API 23或更高版本构建的。对于Cordova，>这意味着使用Cordova Android平台5.0.0或更高版本。如果>app是使用4.x或以下版本(API 22或更低版本)构建的，则运行时权限>不应用--所有权限都是在安装时授予的。

添加到Config.xml中

<access origin="*" />
<plugin name="cordova-plugin-whitelist" version="*" />
<plugin name="cordova.plugins.diagnostic" version="*" />
<plugin name="cordova-plugin-file" version="*" />
<preference name="android-minSdkVersion" value="21" />
<preference name="android-targetSdkVersion" value="23" />


<config-file target="AndroidManifest.xml" parent="/*">
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

谢谢@DaveAlden这段代码..。我只添加了这个函数来检查运行时读取权限。戴夫，你应该把从extSD中读取媒体文件的代码添加到你的项目示例中，这样你就不必像你那样帮助下一个人了。:)

添加到Index.html中

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src * 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<h3>Play video and img file</h3>

<img class="extSdImg" src="img/image1.png"/>
<img class="extSdImg" src="img/image2.png"/>

<p>
<a class="extSdVideo" href="video/video1.mp4">Play video</a>
</p>

<p>
<a class="extSdVideo" href="video/video2.mp4">Play video</a>
</p>
</body>
</html>

添加到Index.js中

function authorizerequestExtSD() {
cordova.plugins.diagnostic.requestExternalStorageAuthorization(function(status){
    console.log("Successfully requested external storage authorization: authorization was " + status);
    checkState();
    getSdRefAndEmbed();
               }, function(error){
     console.error(error);
    });
}

function getSdRefAndEmbed(){
    cordova.plugins.diagnostic.getExternalSdCardDetails(function(details){
    details.forEach(function(detail){
           if(detail.type === "root"){
          cordova.file.externalSdCardRoot = detail.filePath;
          embedMedia();
          }
    });
        }, function(error){
            console.error(error);
    });
}

function embedMedia(){
    $('.extSdImg').each(function(){
           $(this).attr('src', cordova.file.externalSdCardRoot + $(this).attr('src'));
    });
    $('.extSdVideo').each(function(){
            $(this).attr('href', cordova.file.externalSdCardRoot + $(this).attr('href'));
    });
}

$(document).on('deviceready', authorizerequestExtSD);
$(document).on('pageinit', embedMedia);

添加jQuery的本地文件副本(在此项目https://github.com/dpa99c/cordova-diagnostic-plugin-example中找到)：

jquery-2.1.3.min.js

cordova

video

cordova-plugin-file

android

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-03 09:17:54

您的方法行不通：cdvfile://是由cordova定义的内部伪协议，其中路径的第一部分定义了内部参考点(cdvfile://localhost/persistent|temporary|another-fs-root*/path/to/file)，而2B和2C则定义路径，就像相对于外部SD卡根的根一样。

请注意，科多瓦-插件-媒体不会帮助您，因为它只用于播放音频，并且本身并不解析文件位置。

如果您的媒体文件位于外部可移动 SD卡上(例如在三星银河设备中)，则cordova-plugin-file不提供访问此位置的引用。cordova插件文件(例如cordova.file.externalRootDirectory)使用的“外部”引用实际上指向内部内存位置- /scard/。这是因为并不是所有的设备都有可移动的外部SD卡(例如Google )，所以/sdcard是一个“模拟”存储位置，它保证在所有安卓设备上都存在。

如果希望从外部可移动 SD卡读取文件，可以使用科多瓦-诊断插件获取对外部SD卡根的有效文件路径引用。注意，这需要在JS中动态完成，而不是在HTML中硬编码静态路径：

index.html

<body>
    <img class="extSdImg" src="img/image1.png"/>
    <img class="extSdImg" src="img/image2.png"/>
    <p><a class="extSdVideo" href="video/video1.mp4">Play video</a></p>
    <p><a class="extSdVideo" href="video/video2.mp4">Play video</a></p>
</body>

index.js

function getSdRefAndEmbed(){
    cordova.plugins.diagnostic.getExternalSdCardDetails(function(details){
    details.forEach(function(detail){
        if(detail.type === "root"){
        cordova.file.externalSdCardRoot = detail.filePath;
        embedMedia();
        }
    });
    }, function(error){
    console.error(error);
    });
}

function embedMedia(){
    $('.extSdImg').each(function(){
        $(this).attr('src', cordova.file.externalSdCardRoot + $(this).attr('src'));
    });
    $('.extSdVideo').each(function(){
        $(this).attr('href', cordova.file.externalSdCardRoot + $(this).attr('href'));
    });
}

$(document).on('deviceready', getSdRefAndEmbed);
$(document).on('pageinit', embedMedia);

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42572257

复制

相似问题

问cordova-plugin-file用于播放extSD的视频文件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问cordova-plugin-file用于播放extSD的视频文件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问cordova-plugin-file用于播放extSD的视频文件
EN