Well, the title pretty much sums it up.
I successfully managed to make it so that when you slide the volume to 0, it mutes the video. However, I am struggling with achieving this: if the video is muted, the volume slider should automatically move to 0.
I have tried various combinations of code but I can't seem to wrap my head around it.
Here is the HTML snippet:
<div class="controls">
<span class="columns small-8 medium-6 text-left">
<span *ngIf="!playing" class="playpause" (click)="videoHandler('play')">
<i class="fa fa-play" aria-hidden="true" ></i>
</span>
<span *ngIf="playing" class="playpause" (click)="videoHandler('pause')">
<i class="fa fa-pause" aria-hidden="true" ></i>
</span>
<span *ngIf="!muted" class="speaker" (click)="videoHandler('mute')">
<i class="fa fa-volume-up" aria-hidden="true" ></i>
</span>
<span *ngIf="muted" class="speaker" (click)="videoHandler('unmute')">
<i class="fa fa-volume-off" aria-hidden="true" ></i>
</span>
<span class="volumeslider">
<input type="range" name="volume" min="0" max="1" step="0.05" value="1" (input)="videoHandler('volume', $event)">
</span>
</span>
</div>
The TypeScript code snippet:
public videoHandler(fn: any, e: any): void {
let element = this.videoplayer.nativeElement;
switch (fn) {
case 'play':
element.play();
this.playing = true;
break;
case 'pause':
element.pause();
this.playing = false;
break;
case 'fullscreen':
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
break;
case 'mute':
element.muted = true;
this.muted = true;
break;
case 'unmute':
element.muted = false;
element.removeAttribute('muted');
this.muted = false;
break;
case 'volume':
element.volume = e.target.value;
this.muted = e.target.value === '0';
element.muted = e.target.value === '0';
break;
case 'download':
let src = e.target.dataset.vsr;
let id = e.target.dataset.vid;
this.downloadEmitter.emit({
video: src,
video_id: id
});
default:
break;
}
}
It seems like a simple problem, but after staring at it for days, fresh new ideas are hard to come by.