I have updated my previous question. I am trying to play a video in Owl Carousal using on button click but it's not working properly. Some of the videos are playing but most of the time it's not. Without carousal normally for a single video, it's working fine, is any CSS related to owl carousal creating an issue? I am getting proper video elements in the console too. The video seems to be playing and can hear the video sound it's not playing video seems to video screen stuck
Here is my HTML :
I am trying to create a play button by clicking with 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 TS for the function playVideo() :
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 suggestion or hint will be appreciated. Thanks.
I have fixed this issue myself. Generally, it is found that direct owl carousal does not allow playing video by doing just video. play() for video element.
So, I tried to take a video element based on the owl carousel class owl-item. Need to assign an ID for the owl carousel present in page. I have multiple carousals in a single page and it gets incremented whenever API gets called.
TS:
playVideo2(ele:any) {
let cc:any = '.owl-' + ele + ' .owl-item.active video'
if (this.owlCarousel) {
const videoElement = document.querySelector(cc) as HTMLVideoElement | null;
if (videoElement) {
videoElement.play();
}
}
}
HTML:
<div class="big_img mediaCursor owl-{{post.post_id}}" *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)="playVideo2(post.post_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" height="" controls preload="metadata" 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>
Hope it will be helpful for anyone looking to implement same.