0
299
ViewsHow to control custom button on ngx-plyr
THIS ORIGINAL POST WAS EDITED
I'm trying to create a custom control on ngx-plyr, i copied the controls from here controls.md but instead specifying the control inside plyrOptions like the docs said, i'm creating element inside component.html.
The reason i do that is because i need other buttons, which have custom function. I don't if there's a way to create custom funtion inside controls property of plyrOptions or not, so right now i stick with this setup.
Here's my custom button
<div class="plyr__progress" style="width:70%;">
<input data-plyr="seek" type="range" [nbTooltip]="remaining"
nbTooltipPlacement="top" nbTooltipStatus="basic" [max]="duration" min="0"step=".000001" [value]="time" aria-label="Seek"
(input)="seeked($event.target.value)">
</div>
<div style="margin-left: 15px;" class="plyr__time plyr__time--current" aria-label="Current time">{{remaining}}
</div>
<div class="plyr__time plyr__time--duration" aria-label="Duration">{{ durationString }}</div>
<button [nbPopover]="templateRef" nbTooltip="Repeat Section" nbTooltipPlacement="top" nbTooltipStatus="basic"
nbPopoverPlacement="top" type="button" class="plyr__control">
<img width="16px" src="/assets/icon/repeat.svg" />
<span role="tooltip" class="plyr__tooltip">Repeat Section</span>
</button>
there are actually 1 custom button that i wanted to handle, but since all of the controls are custom, so i need to set value and functions to each control such as play, pause etc.
right now what didn't work is changing the time by seeking or drag the range slider handle, i specified the value of video time using timeupdate event like this
plyr.player.on('timeupdate', () => {
this.time = plyr.player.currentTime;
this.remaining = this.parse(plyr.player.duration - plyr.player.currentTime);
})
and for changing the time from range slider input using this function
seeked(e) {
this.plyr.forEach(plyr => {
plyr.player.on('playing', ()=>{
this.time = e;
plyr.player.currentTime = e;
})
});
}
but that didn't work as i expected, it didn't play the video based on the time that i selected. did anyone knows why?
1 answers
Answer question0
Okay the reason why it didn't play from the time you seeked to, is because you were setting the currentTime to e. When debugging it, it logged e as a string and so you need parse the value.
// Code based on your stackblitz example
seeked(e) {
// This logs as string.
console.log(typeof e);
// This logs as number.
console.log(typeof parseFloat(e));
this.plyr.forEach(plyr =>{
plyr.player.once('timeupdate', ()=>{
plyr.player.currentTime = parseFloat(e);
plyr.player.play();
})
})
}