时间戳

首页 > 解决方案 > 如果单击“静音”，则音量滑动 = 0

javascript - 如果单击“静音”，则音量滑动 = 0

问题描述

好吧，标题说明了一切。

当您将音量滑到 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;
    }
}

当然这很简单，但是看了几天这个并没有让我有新的想法。

标签： javascriptangulartypescript

解决方案

如果您需要这个，答案很简单，我将在此处发布代码：

 <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'); slider.value = 0" >
              <i class="fa fa-volume-up" aria-hidden="true" ></i>
            </span>
            <span *ngIf="muted" class="speaker" (click)="videoHandler('unmute'); slider.value = 1">
              <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); slider.value = $event.target.value" class="volumeslide" #slider>
            </span>
          </span>
   </div>

所以我错过的是添加slider.value = number静音或取消静音。

推荐阅读