I recently updated my query. I am facing an issue while trying to play a video in Owl Carousal with a button click. The video plays sporadically, and most of the time it doesn't work properly. When playing without the carousel, a single video works fine. Could there be a CSS-related problem with the owl carousal causing this issue? I have checked the console and can see the correct video elements. Although the video appears to be playing as I can hear the sound, the video screen is often stuck.
Below is the HTML code I am using:
I am attempting to create a play button that triggers the function playVideo()
<div class="big_img mediaCursor" *ngIf="post.mediaData && post.mediaData.length > 1 && post.post_type == 'is_post'" >
<owl-carousel-o [options]="customOptions1" #owlCarousel (change)="handleSlide($event)">
<ng-container *ngFor="let img of post.mediaData" >
<ng-template class="slide" carouselSlide>
<button *ngIf="img.media_type === 'video'" class="btn-play-video" id="video_play_{{img.id}}" (click)="playVideo(img.id)">
<i class="ti ti-control-play"></i>Play
</button>
<div class="mb-0 testtts" id="parentVideo_{{img.id}}" >
<img *ngIf="img.media_type === 'image'" (click)="Openpost(post.post_id)" [src]="img.file_path" alt="Icelandic"
class="big_img img-fluid cursor" />
<video id="video_{{img.id}}" width="640" controls preload="none" poster="{{img.video_thumb}}"
*ngIf="img.media_type === 'video'" class="video-js vjs-default-skin cursor"
>
<source src="{{ img.file_path }}#t=1" type="video/mp4" />
</video>
</div>
</ng-template>
</ng-container>
</owl-carousel-o>
</div>
Here is my typescript for the playVideo() function:
playVideo(eleId){
let button:HTMLButtonElement = document.querySelector('#video_play_' + eleId)
let video:HTMLVideoElement = document.querySelector('#video_' + eleId)
let parentDiv:HTMLDivElement = document.querySelector('#parentVideo_' + eleId)
let ddVHeight = parentDiv.offsetHeight
video.load();
video.onloadeddata = (event) => {
video.play()
this.renderer.setStyle(parentDiv, "height", `${ddVHeight}px`);
this.renderer.listen(video, 'playing', () => {
this.renderer.addClass(button, 'hide');
})
this.renderer.listen(video, 'pause', () => {
this.renderer.removeClass(button, 'hide');
})
};
}
Any suggestions or hints would be greatly appreciated. Thank you.