остановить воспроизведение видео фон всплывающего видео даже после закрытия с использованием угловой машинописи работает только для первой карты - PullRequest
Новая
       10

остановить воспроизведение видео фон всплывающего видео даже после закрытия с использованием угловой машинописи работает только для первой карты

0 голосов
/ 04 июня 2019

У меня есть список карточек в одном компоненте, который состоит из миниатюры. Когда мы нажимаем на эту миниатюру, она всплывает, и мы получаем видео в этом модале.Моя проблема в том, что я написал логику для «всякий раз, когда я нажимаю на кнопку закрытия, видео перестает воспроизводиться в фоновом режиме», но это работает только для первой карты.я использую Angular6 

<div class="col-md-4" *ngFor="let demo of videosData; let i = index">

    <div class="smart-img story-card-content" data-toggle="modal" [attr.data-target]="'#videosModal' + demo.videoId">
        <div id="v-name" style="color: #f4fdff">{{ demo.videoName }}</div>
        <img class="video-img" src="{{ demo.videoposter }}" />
        <div class="video-play">
            <i _ngcontent-c4="" class="fa fa-play-circle fa-3x"></i>
        </div>
    </div>

    <div class="story-card-content video-content">
        <p>
            {{ demo.videoShortDesc }}
        </p>

    </div>
    <div class="modal fade" [attr.id]="'videosModal' + demo.videoId">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-body">
                    <video id="demoVideos" class="card-img-top img-fluid demo-video" poster="{{ demo.videoposter }}"
                        controls *ngIf="demo" #videoplayer>
                        <source [src]="demo.videoUrl" type="video/mp4" />
                        Your browser does not support the video tag.
                    </video>
                    <p style="color: black" *ngFor="let desc of demo.videoDesc; let j = index">
                        {{ desc }}
                    </p>
                    <div style="text-align: center">
                        <button type="button" class="exit" data-dismiss="modal" (click)="stopVideo()">
                            Go Back
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

ts файл: 

@ViewChild('videoplayer') videoElem: ElementRef;

stopVideo() {
      this.videoElem.nativeElement.pause();
}

Я хочу выводить, даже если я нажимаю на видео других карт, его видео должно быть остановлено в фоновом режиме

...