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

Question

我正在使用 html5 的视频标签来显示我 select 来自图库的视频。我遇到了一个问题，即即使我提供了来源，视频也无法加载。

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

我的-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;
    });
  }
}

我的-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。它不适用于 iPhone 6 和 iOS 12。未在其他 iOS 版本上测试。

我尝试过的一些事情：

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

Answer 1

由 "sanitizing" 解决 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"。

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

How to show a video from gallery in Ionic iOS

html5-video

ios

cordova

ionic-framework

angular