Angular 9 Mat-Slider не работает должным образом на устройствах iOS
РЕДАКТИРОВАТЬ: в iOS 12.4.6 он все еще не работает, но, по крайней мере, полоса больше не дергается, но все еще не регистрирует значения или не включает звук при предварительно установленном значении 20% . На iOS 13.3.1 (другой мой телефон) все описанные проблемы воспроизводятся
В моем веб-приложении есть коврик-слайдер для управления громкостью видео, которое работает в фоновом режиме.
В iOS ( Safari / Chrome) он не соблюдает ни одну из моих реализаций, согласно которым, когда пользователь включает видео, чтобы перейти на 20% (он переходит на 100%, однако значение не зарегистрировано, оно все еще слышит как 20%) .
Если я попытаюсь перейти к любому значению, оно само вернется к 100%. При использовании Taps, а не Sliding он остается на месте, но не регистрирует значение (громкость остается прежней).
На устройствах Android / Desktop он работает так, как я хочу.
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 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, а также между ними или над ними, поскольку я видел, что такие заказы помогли другим.
Ничего не работает.
Спасибо.
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.