как воспроизвести видео в режиме bootstrap в режиме angular 7

Question

Я хочу автоматически воспроизвести видео, когда модал bootstrap открывается. Я пытался по-другому, но ничего не работает. То, что я пытаюсь, это когда мы нажимаем на тег привязки, и я вызываю одну функцию, чтобы открыть модальное вручную и разместить видео sr c dynamici c. пожалуйста, помогите мне. без модального Если я показываю, видео воспроизводится.

без модального это работает

<video id="{{result.profileId._id}}" width="100%" height="200" controls style="margin:10px 0">
              <source src="{{result.url}}" poster="assets/images/avatar.png" type="video/mp4">
   </video>

html файл

<div class="col-md-6" *ngFor="let result of trendvideos">
        <div class="aud1 tr-vid card card-shadow">
            <div class="aud-blk"> 

             <a   (click)="getVideo(result.secureUrl)"   *ngIf="result?.profileId?.image.secureUrl != null" class="user-img mt-3" >
              <img class="img-fluid" src="{{result.profileId.image.secureUrl}}">
            </a>

            <a  (click)="getVideo(result.secureUrl)"   *ngIf="result?.profileId?.image.secureUrl == null" class="user-img mt-3">
              <img class="img-fluid" src="assets/images/avatar.png">
            </a>

            <p><b> {{ result.likes }} </b><span><i class="fas fa-heart" style="color: red;"></i></span></p>

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

модальное

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <video id="video1" width="100%" height="200" controls autoplay style="margin:10px 0">
                <source  src="{{videoUrl}}" poster="assets/images/avatar.png" type="video/mp4">
              </video> 
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
  </div>

машинописный файл для открытия модального

getVideo(vidUrl) {
    //let videoid = event.getAttribute('data-value');
    console.log(vidUrl);
    this.videoUrl = vidUrl;
    $('#exampleModal').modal('show');
  }

Answer 1

Попробуйте связать ниже bootstrap модальные события в методе ngOnInit (). При открытии модального режима, т. Е. 'показывается .bs.modal' , воспроизводите видео с использованием функции 'play' jQuery и при закрытии модального режима прекращайте воспроизведение видео. Убедитесь, что вы используете JQuery в своем проекте angular.

$('#exampleModal').on('shown.bs.modal', function () {
   setTimeout(function() {
       $('#video1')[0].play();
   }, 1000);
  // or use below JS code if not using jQuery
 /* var vid = document.getElementById("video1"); 
  vid.play(); */

})
$('#exampleModal').on('hidden.bs.modal', function () {
  $('#video1')[0].pause();
})