I am having trouble getting a video to autoplay when opening a Bootstrap modal. I have tried various methods without success. My approach involves clicking on an anchor tag that triggers a function to open the modal manually and dynamically set the video source. Can someone please assist me with this? The video plays fine without the modal.
This is how it works without the modal:
<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 file:
<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>
Modal code snippet:
<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">×</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>
Typescript file for opening the modal:
getVideo(vidUrl) {
//let videoid = event.getAttribute('data-value');
console.log(vidUrl);
this.videoUrl = vidUrl;
$('#exampleModal').modal('show');
}