在Cordova中播放通过cdvfile：//加载的视频

问题描述

更新的信息

我发现使用cdvfile://时不能使用cordova-ios 6.1.0，因为WKWebView的工作方式。现在，您需要使用window.WkWebView.convertFilePath([your file path]);将路径转换为WKWebView。

我现在正在使用从toURL()插件中获取FileEntry并将该值输入cordova-plugin-file时发现的window.WkWebView.convertFilePath方法。

我仍然遇到类似的错误，但是我认为我越来越接近破解这个蛋了：

Refused to load unsafe:app://localhost/_app_file_/var/mobile/Containers/Data/Application/{ID}/Library/NoCloud/videos/recording.MOV because it does not appear in the media-src directive of the Content Security Policy.

我在CSP中添加了app:，并在<access origin=app://* />中添加了config.xml。

有人知道我如何摆脱错误并在<video>元素内播放视频吗？

原始帖子

尝试在cdvfile://元素中播放<video>文件时，即使我添加的内容是我的内容安全策略的正确属性，我也会收到以下错误消息：如下）：

Refused to load unsafe:cdvfile://localhost/library-nosync/videos/recording.MOV because it does not appear in the media-src directive of the Content Security Policy.

要使用Angular + Cordova在基本的<video>元素中运行本地存储的视频文件，需要什么？

其他信息

我正在使用Angular 9.0.7，cordova 10.0.0和cordova-ios 6.1.0来构建一个播放视频的应用程序。使用cordova-plugin-media-capture 3.0.3创建记录，并使用cordova-plugin-file 6.0.2将记录保存到本地设备。

我已将以下内容添加到我的config.xml中：

<access origin="cdvfile://*" />
<preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

我还使用了我发现的最开放/最不安全的内容安全策略，并将cdvfile:添加到default-src，connect-src和media-src：

<Meta http-equiv="Content-Security-Policy" content="
    default-src * data: blob: filesystem: about: ws: wss: gap: cdvfile: 'unsafe-inline' 'unsafe-eval'; 
    script-src * filesystem: gap: cdvfile: data: blob: 'unsafe-inline' 'unsafe-eval'; 
    connect-src * filesystem: gap: cdvfile: data: blob: 'unsafe-inline'; 
    img-src * filesystem: gap: cdvfile: data: blob: 'unsafe-inline'; 
    frame-src * data: blob: ; 
    style-src * data: blob: 'unsafe-inline';
    font-src * data: blob: 'unsafe-inline';
    media-src * filesystem: gap: cdvfile: data: blob: mediastream: ;
">

在cordova-plugin-file插件（link）的文档中，他们提供了示例内容安全策略，但是该策略似乎无效：

<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 *
">

使用上述方法时，加载时出现以下错误：

The source list for Content Security Policy directive 'default-src' contains an invalid source: 'gap:cdvfile:https://ssl.gstatic.com'. It will be ignored.

消除错误的唯一方法是在gap:，cdvfile:和https://ssl.gstatic.com之间添加一个空格。我最终删除了https://ssl.gstatic.com，以使CSP尽可能通用并“开放”。

更多信息

我可以使用以下方法加载MOV文件并验证该文件是否存在：

window.resolveLocalFileSystemURL([PATH TO FILE ENTRY],entry => {

    entry.getMetadata(Metadata => {
        console.log(Metadata); // If Metadata.size exists and isn't 0,I believe I have the file
    },err => {
        console.error(err);
    });

});

一旦有了文件（在此示例中为变量entry），我就在组件中使用以下命令获取文件路径：

let videoSrc: string = entry.toInternalURL();

这是我的cdvfile://路径，然后将其用作在视频元素中播放的源：

<video *ngIf="videoSrc" id="video" width="640" height="360" preload controls>
    <source [src]="videoSrc" type="video/mp4" />
</video>

...所以，是的。那就是我的人生故事...谁能阐明允许我在标准cdvfile元素中播放本地<video>文件的条件？

解决方法

我相信您需要在app:中为<meta http-equiv="Content-Security-Policy"添加显式权限。

        <!-- Enable all requests,inline styles,and eval() -->
        <meta http-equiv="Content-Security-Policy" content="
        default-src * app: gap: data: cdvfile: android-webview-video-poster: file:; 
        style-src 'self' 'unsafe-inline'; 
        script-src * 'unsafe-inline'">

（由于某些原因，default-src *还不够。我必须添加default-src * app:使其在http://网址上起作用。）
如果您根本没有<meta http-equiv="Content-Security-Policy"，它也似乎可以工作。

我的人生故事，因为我花了很长时间才弄清楚为什么它对您不起作用：
我可以确认这可以正常工作。
基于您的“更新的信息” ...

我正在使用cdvfile> nativeUrl> schemeUrl

schemeUrl对我有用。

当我在<img>和<video>的src标记中使用schemeUrl时：

具有schemeUrl（app://localhost/...）的页面：
- 没问题。
具有https://...网址的页面：
- 警告：“允许 https：// ... 上的页面显示来自 app：// localhost / ... 的不安全内容”
- 但是可以。
带有http://的页面
- 我收到您收到的警告。

注释/其他可能的想法：
您的<access origin=app://* />
应该是<access origin="app://*" />
但是我不认为这是您的问题，因为我的config.xml中根本没有<access origin/>标记。

您可以尝试添加：
<allow-navigation hap-rule="yes" href="app://localhost/*" />
到您的config.xml（在您有<access origin=.../>的地方）但是我也只是在没有此功能的情况下尝试了我的应用程序，这很好。

您还可以尝试升级到cordova-ios@6.1.1

angular angular cordova cordova-ios cordova-plugin-file cordova-plugins