时间戳

首页 > 解决方案 > Ionic iOS - 复制一些 HTML 视频后变黑

ios - Ionic iOS - 复制一些 HTML 视频后变黑

问题描述

我正在构建一个应用程序，在该应用程序中，随着页面流的推进，用户可以在不同的组件中复制几个 html5 视频。视频的 mp4 源来自本地文件系统。

在我部署在服务器上并且人们正在使用 Chrome 的网络版本上，一切都运行良好。

但是在 iOS 中，在复制了大约 18 个这些视频后，所有视频都停止工作，只出现黑框。（我能够在 iPad 3 和 4 上重现它）关于可能导致此问题的任何想法？我觉得它一定与某种缓存/内存有关，因为只有在复制了大约数量的视频后才会出现问题。此外，在我关闭并重新打开应用程序后，视频可以再次播放。

视频标记示例

    <video id="video_1" playsinline playsinline="playsinline" webkit-playsinline webkit-playsinline="webkit-playsinline">
       <source [attr.src]="ds.normalizeURL(video[0])" type="video/mp4"/>
    </video>

我会尝试看看它是否与缓存在 File.cacheDirectory 上的文件有关，但我对这种方法并不感到很幸运。

或者，Ionic 中是否有办法播放具有本机功能的视频，但能够在页面布局中内联而不是全屏再现它们？我什么都没找到

我的版本：离子：3.9.2 角度：5.2.9

标签： iosionic3angular5html5-videowkwebview

解决方案

这确实是一个与内存/垃圾收集相关的问题。我实现了这一点，问题就消失了。

import {Component, Input, ViewChild} from 'angular2/core';

@Component({
   selector: "releasable-video",
   template: '<video [src]="src" #player></video>'
})
export class ReleasableVideoComponent {

@Input() src : string
@ViewChild('player') player;

constructor() {

}
ngOnDestroy() {
    // the .nativeElement property of the ViewChild is the reference to the <video> 
    this.player.nativeElement.src = '';
    this.player.nativeElement.load();
}

推荐阅读