ios - 如何在 Ionic iOS 中显示图库中的视频

Question

我正在使用 html5 的视频标签来显示我从图库中选择的视频。我遇到的问题是，即使我提供了来源，视频也无法加载。

这是一个以 Capacitor 作为桥梁的 Ionic/Angular 项目，但仍然使用 Cordova 插件。这是我的代码的原型(prototype):

my-page.page.ts

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Capacitor } from '@capacitor/core';

@Component({...})
export class MyPage {

  // ... some code which gets the a reference to the video element from the template

  // this function is called when the user clicks a button to choose video from gallery
  onPickVideo() {
    const cameraOptions: CameraOptions = {
      destinationType: this.camera.DestinationType.NATIVE_URI,
      sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
      mediaType: this.camera.MediaType.VIDEO,
    };
    this.camera.getPicture(cameraOptions).then(videoUri => {
      console.log(videoUri);
      this.videoSrc = Capacitor.convertFileSrc(videoUri);
      console.log(this.videoSrc);
      this.videoEl.load();
      this.videoEl.currentTime = 0.1;
    });
  }
}

my-page.page.html

<video playsinline #video>
  <source [src]=".videoSrc" type="video/mp4" />
  Your browser does not support the video tag.
</video>

my-page.page.ts 的输出是:

file:///private/var/mobile/Containers/Data/Application/7D85727C-CE9A-4816-BC42-C97F03AFDEB4/tmp/F6DCE819-ED4A-41E4-BAFB-814500F2FB27.MOV

capacitor://localhost/_capacitor_file_/private/var/mobile/Containers/Data/Application/7D85727C-CE9A-4816-BC42-C97F03AFDEB4/tmp/F6DCE819-ED4A-41E4-BAFB-814500F2FB27.MOV

这适用于桌面和 Android。它不适用于装有 iOS 12 的 iPhone 6。未在其他 iOS 版本上进行测试。

我尝试过的一些事情:

• 添加了 NSCameraUsageDescription、NSPhotoLibraryUsageDescription、NSPhotoLibraryAddUsageDescription、NSMicrophoneUsageDescription
• 在视频标签中使用了[src]=，并删除了源标签。或者省略“video/mp4”类型
• 在实时重新加载模式下运行与仅构建。
• 将 'file:///' 从 videoUri 的开头切掉，然后再将其传递给 convertFileSrc()。或者执行前者，直接将其设置为 videoSrc，根本不使用 convertFileSrc()。

Answer 1

通过“清理”URL 来解决。我还不知道这真正意味着什么。这是代码，以防有人需要它

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Capacitor } from '@capacitor/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';


@Component({...})
export class MyPage {

  // ... some code which gets the a reference to the video element from the template

  safeUrl: SafeUrl;

  constructor(private sanitizer: DomSanitizer) {}

  // this function is called when the user clicks a button to choose video from gallery
  onPickVideo() {
    const cameraOptions: CameraOptions = {
      destinationType: this.camera.DestinationType.NATIVE_URI,
      sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
      mediaType: this.camera.MediaType.VIDEO,
    };
    this.camera.getPicture(cameraOptions).then(videoUri => {
      this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(
          Capacitor.convertFileSrc(videoUri)
        );
      this.videoEl.load();
      this.videoEl.currentTime = 0.1;
    });
  }
}

然后确保在模板中使用 safeUrl [src]="safeUrl"。