Ionic5+Angular12视频预览异常：video_url无法加载本地视频

问题核心 #

使用mediaCapture捕获视频后，直接将capturedFile.fullPath赋值给video标签的src，触发WebView安全限制，报错「Not allowed to load local resource: file:///...」，导致视频无法预览。上传功能正常但预览失败，本质是本地文件路径的访问权限问题。

原因分析 #

WebView出于安全考量，禁止直接加载file://协议的本地资源。capturedFile.fullPath是设备本地文件的绝对路径（file://开头），会被WebView拦截；而capturedFile.localURL是Cordova提供的虚拟访问路径（通常是cdvfile://开头），可以通过Cordova插件转换为WebView可识别的合法路径。

解决方案 #

步骤1：安装cordova-plugin-file插件 #

该插件用于处理本地文件路径的解析与转换：

ionic cordova plugin add cordova-plugin-file
npm install @ionic-native/file/ngx

步骤2：修改视频捕获逻辑，替换路径处理方式 #

在组件中导入File模块，然后修改captureVideo方法，用localURL替代fullPath，并通过插件转换为可访问路径：

导入模块

import { File } from '@ionic-native/file/ngx';
// 记得在组件所属模块的providers数组中注册File

修改captureVideo方法

captureVideo() {
    const options: CaptureVideoOptions = {
        limit: 1,
        duration: 30
    }
    this.mediaCapture.captureVideo(options).then((res: MediaFile[]) => {
        let capturedFile = res[0];
        // 使用localURL而非fullPath
        const localUrl = capturedFile.localURL;

        // 解析localURL为合法路径
        this.file.resolveLocalFileSystemURL(localUrl).then(fileEntry => {
            // 方案1：生成WebView可直接访问的URL（适合大视频，无内存压力）
            this.video_url = fileEntry.toURL();

            // 方案2：转换为DataURL（适合小视频，base64编码，无需额外路径处理）
            // fileEntry.file(file => {
            //     const reader = new FileReader();
            //     reader.onloadend = () => {
            //         this.video_url = reader.result as string;
            //     };
            //     reader.readAsDataURL(file);
            // });
        }).catch(err => console.error('路径解析失败:', err));
    }, (err: CaptureError) => console.error('视频捕获失败:', err));
}

步骤3：验证视频格式判断逻辑 #

原checkExtension方法可继续使用，但需确保userData.getFileExtension能正确解析localURL或转换后路径的扩展名。若解析异常，可直接从capturedFile.type字段获取视频格式（如video/mp4），设置source的type属性。

关键说明 #

• fileEntry.toURL()生成的路径是WebView认可的安全路径，不会触发拦截，适合大体积视频；
• DataURL是base64编码的字符串，无需依赖外部路径，但大视频会占用较多内存，按需选择；
• 上传功能正常是因为上传时通常直接使用MediaFile的原始文件流或通过插件读取文件内容，不受WebView路径限制。

内容的提问来源于stack exchange，提问作者SimonIoa