Как воспроизвести видео при смене слайда ioni c Slides - PullRequest
Новая
       129

Как воспроизвести видео при смене слайда ioni c Slides

0 голосов
/ 07 августа 2020

Я пытаюсь воспроизвести поведение TikTok для своего слайда. Я использую ioni c -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();
  }
}

Как мне подключить видео компонент проигрывателя и его родительский компонент страницы канала для обработки события изменения и воспроизведения / паузы необходимого видео? Должен ли я сделать это через службу или ...? Есть идеи / предложения?

...