0

我正在尝试为我的视频幻灯片重现 TikTok 行为。我正在使用 ionic-slides，它使用引擎盖下的 swiper 库和 videogular2 库来控制视频。

所以，现在，我有一个带有 3 个幻灯片的滑块。每张幻灯片都包含一个视频组件。我需要的是在准备好时自动播放第一个视频，然后在幻灯片上播放下一个视频更改并停止上一张幻灯片中的视频。

在我的feed.component.html我有下一个标记

<ion-slides pager="true" [options]="feedSliderOptions"
                (ionSlideTransitionEnd)="slideChanged($event)">
        <ion-slide class="item-slide" *ngFor="let item of (itemsFeed | async)">
            <app-video-player [item]="item">
            </app-video-player>
        </ion-slide>
</ion-slides>

在我的feed.component.ts

export class FeedPage implements OnInit {
  public itemsFeed: Observable<any[]>;
  public activeElementNotInViewport: boolean;
  public feedSliderOptions = {
    grabCursor: true,
    watchSlidesVisibility: true,
    watchSlidesProgress: true,
    direction: 'vertical',
    pagination: {
      renderBullet: () => null
    },
    on: {
      beforeInit() {
        console.log('before slide initiated');
      },
    }
  };

  constructor(private feedService: FeedService,
              private videoService: VideoService) {
  }

  ngOnInit(): void {
    this.itemsFeed = this.feedService.getHotFeed();
  }

  public slideChanged(event) {
    const slideIndex = event.target.swiper.activeIndex;
    this.videoService.playingVideoIndex.next(slideIndex);
    console.log(slideIndex);
    console.log(event);
  }
}

app-vide-player.component.html包含

<div class="video-holder">
  <vg-player (onPlayerReady)="onPlayerReady($event)">
    <video [vgMedia]="media" #media [id]="'video-' + item.id"
           [poster]="item.previewImage">
      <source [src]="item.videoUrl" type="video/mp4">
    </video>
  </vg-player>
</div>

并app-vide-player.component.ts包含

export class AppVideoPlayerComponent implements OnInit, OnDestroy {
  @Input()
  public item: any;
  public videoIsPlaying: boolean;
  public vgAPI: VgAPI;
  public media: VgMedia;
  @ViewChild('videoPlayer', { static: false }) videoPlayer: ElementRef;
  @Output()
  private videoCanPlay: EventEmitter<any> = new EventEmitter<any>();
  private unsubscribeNotifier: Subject<any> = new Subject<any>();
  private prevActiveIndex: number;

  constructor(private videoService: VideoService) {}

  ngOnInit() {
    console.log('video inited');
  }

  ngOnDestroy(): void {
    this.unsubscribeNotifier.next();
    this.unsubscribeNotifier.complete();
    console.log('destroyed');
  }

  public onPlayerReady(api: VgAPI) {
    this.vgAPI = api;
    this.vgAPI.subscriptions.ended.subscribe(isEnded => {
      if (isEnded) {
        this.vgAPI.play();
      }
    });
    this.vgAPI.subscriptions.pause
      .pipe(
        takeUntil(this.unsubscribeNotifier)
      )
      .subscribe(isPaused => {
      console.log('isPaused');
    });
    this.vgAPI.subscriptions.playing
      .pipe(
        takeUntil((this.unsubscribeNotifier))
      )
      .subscribe(isPlaying => {
      console.log('isPlaying');
    });
  }

  public playVideo() {
    this.videoIsPlaying = !this.videoIsPlaying;
    this.vgAPI.play();
  }
}

我应该如何连接视频播放器组件和他的父提要页面组件来处理更改事件并播放/暂停所需的视频？我应该通过服务还是...？有什么想法/建议吗？

4

0 回答 0