Angular 9 Mat-Slider 在 iOS 设备上无法正常工作

Question

编辑：在 iOS 12.4.6 上它仍然不起作用，但至少条不再跳动了，但仍然没有注册值，或者在预设值 20% 处取消静音。在 iOS 13.3.1（我的另一个 phone ）上，所有描述的问题都会重现

我的 Web 应用程序中有一个 mat-slider 来控制在后台运行的视频的音量。

在 iOS（Safari / Chrome）上，当用户取消静音视频跳转到 20%（它跳转到 100% 但是值是没注册，听说还是20%）。

如果我尝试滑动到任何值，它会自动跳回到 100%。使用 Taps 而不是 Sliding 它停留在该位置但它没有注册值（音量保持不变）。

在 Android 设备/台式机上，它可以正常工作。

package.json

{
  "name": "taraful-turnenii-web-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 192.168.1.2",
    "build": "ng build",
    "build-prod" : "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.2",
    "@angular/cdk": "^9.2.1",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.1",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "bootstrap": "^4.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/language-service": "~9.1.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

CLI

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.1
Node: 13.13.0
OS: win32 x64

Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.1
@angular/cli                      9.1.1
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.2.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

HTML mat-slider 代码：

<mat-slider class="matSlider" 
  [value]="matBarValue"
  (input)="videoElement.volume = $event.value"
  (change)="changeBtnIcoWithSlider(videoElement, muteBtn)" tickInterval="0.01" step="0.01" min="0" max="1"></mat-slider>

CSS :

.mat-slider {
  position: relative;
  float: left;
  left: 0;
  right: 0;
  width: 17vw;
}

@media(max-width: 397px) {

  .mat-slider {
    margin-top: 3px;
    width: 200px;
  }
}

@media(max-width: 768px) {

  .mat-slider {
    margin-top: 3px;
    width: 77vw;
  }

}

滑块内调用的 TS 代码

changeBtnIcoWithSlider(videoElement, muteBtn: HTMLButtonElement) {
    if (videoElement.volume > 0) {
      videoElement.muted = false;
      this.matBarValue = videoElement.volume;
      muteBtn.innerHTML = 'Mute Video'
      this.imageSrc = 'assets/VolIcon.png';
    } else {
      muteBtn.innerHTML = 'Unmute Video';
      this.imageSrc = 'assets/MuteIcon.png';
      videoElement.muted = true;
    }
  }

我尝试的是：添加 hammerjs 但是我读到这对于这个版本的 angular 不是强制性的，以便 mat-slider 与手势识别一起工作（它适用于 android ..）

在 BrowserAnimationsModule 和 BrowserModule 之后放置垫子滑块模块导入，也在它们之间或之上，因为我看到这些命令帮助了其他人。

没有任何效果。

谢谢。

Answer 1

好的，

在 iOS 上，您似乎无法通过 JS / TS 设置音量属性，正如 Apple 文档所说：

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW11

Angular 9 Mat-Slider 在 iOS 设备上无法正常工作

Angular 9 Mat-Slider does not work properly on iOS Devices

css

angular

angular-material

angular9

mat-slider