Angular 9 Mat-Slider не работает должным образом на iOS устройствах - PullRequest
Новая
       33

Angular 9 Mat-Slider не работает должным образом на iOS устройствах

0 голосов
/ 21 апреля 2020

РЕДАКТИРОВАТЬ: На iOS 12.4.6 он все еще не работает, но, по крайней мере, полоса больше не является скачкообразной, но по-прежнему не регистрирует значения или не включает звук при предварительно установленном значении 20%. На iOS 13.3.1 (мой другой телефон) воспроизводятся все описанные проблемы

У меня в веб-приложении есть ползунок для управления громкостью видео, которое работает в фоновом режиме.

На iOS (Safari / Chrome), ни одна из моих реализаций не учитывает, что, когда пользователь включает звук, видео переходит на 20% (оно переходит на 100%, однако значение не регистрируется, оно все равно слышит как 20%).

Если я пытаюсь перейти к какому-либо значению, оно само возвращается к 100%. С помощью касаний, а не скольжения он остается на месте, но не регистрирует значение (объем остается прежним).

На Android устройствах / настольных ПК он работает так, как я хочу.

пакет. 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 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;
    }
  }

То, что я пробовал: добавление молотка js, однако я прочитал, что это не обязательно для этой версии angular, чтобы мат-слайдер для работы с распознаванием жестов (работает на android ..)

Размещение импорта модуля мат-слайдера после, BrowserAnimationsModule и BrowserModule, также между ними или над ними, как я видел, эти типы заказов помогли другие.

Ничего не работает.

Спасибо.

1 Ответ

0 голосов
/ 23 апреля 2020

Хорошо,

Кажется, что на iOS вы не можете установить свойство тома с помощью JS / TS, и, как Apple делает c, говорит: 

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

...