Angular 8 - 视频无法在灯箱中播放

如何解决Angular 8 - 视频无法在灯箱中播放

我可以在灯箱中显示图像

但是当尝试在 ngx-lighBox 中播放视频时。但它不起作用。也没有收到任何错误

我使用了以下链接中的参考

https://therichpost.com/angular-9-angular-ngx-lightbox/

代码： HTML：

<div *ngFor="let image of _albums; let i=index">
  <img [src]="image.thumb" (click)="open(i)" />
</div>

 typescript:
 _albums = [];
  constructor(private _lightBox: LightBox) {
    for (let i = 1; i <= 4; i++) {
      const src = 'https://themyth92.com/project/ngx-lightBox/demo/img/image' + i + '.jpg';
      const caption = 'Image ' + i + ' caption here';
      const thumb = 'https://themyth92.com/project/ngx-lightBox/demo/img/image' + i + '-thumb.jpg';
      const album = {
         src: src,caption: caption,thumb: thumb
      };
 
      this._albums.push(album);
    }
  }
 
  open(index: number): void {
    // open lightBox
    this._lightBox.open(this._albums,index);
  }

解决方法

请试试这个片段

this.lightbox.opened.subscribe(res => {
  setTimeout(() => {
    const video: HTMLMediaElement = document.querySelector("#lightbox-video-gallery .g-active-item video");
    if(video) {
      video.play();
    }
  });
});

您还可以查看此库 https://www.positronx.io/angular-video-player-using-ngx-videogular-with-customized-controls-example/。