如何在 Ionic iOS 中顯示圖庫中的視頻

Question

我正在使用 html5 的視頻標簽來顯示我從圖庫中選擇的視頻。 我遇到了一個問題，即使我提供了源，視頻也無法加載。

這是一個以 Capacitor 為橋梁的 Ionic/Angular 項目，但仍然使用 Cordova 插件。 這是我的代碼原型：

我的頁面.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.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
• 在 video 標簽中使用了 [src]=，並刪除了 source 標簽。 或者省略“video/mp4”類型
• 在實時重新加載模式下運行與僅構建。
• 在將其傳遞給convertFileSrc()之前，從videoUri的開頭videoUri 'file:///' 。 或者做前者並直接將其設置為 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;
    });
  }
}

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