【发布时间】：2020-09-06 03:13:12
【问题描述】：
好吧，标题说明了一切。
当您将音量滑动到 0 时，我设法连接它，它已静音，但现在我遇到了这样的问题：如果静音，音量滑块应为 0。
我尝试了一些代码组合，但似乎无法理解它。
html:
<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>
打字稿：
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;
}
}
当然这很简单，但是看了几天并没有让我有新的想法。
【问题讨论】：
-
看起来你的代码想要有七个独立的函数而不是一个，但你正在合并它们，这样你就不需要重复第一行。您希望在静音功能中使用
const volume = document.querySelector('[name="volume"]'); volume.setAttribute("--unmute", volume.value); volume.value = 0;，在取消静音功能中使用const volume = document.querySelector('[name="volume"]'); const unmuteValue = volume.getAttribute("--unmute"); volume.value = unmuteValue ? unmuteValue : 0;。或者类似的东西。 -
@Charles Bamford 感谢您的重播！我尝试了您的想法并尝试对其进行调整，但这不起作用，似乎它不会接受音量为 0 的值：/
标签： javascript angular typescript