РЕДАКТИРОВАТЬ:
Я тестировал на 12.4.6 версии iOS, и он играет без проблем. Однако на моем основном телефоне: iOS 13.3.1, эта проблема все еще описана здесь.
Я немного знаком с Angular, и я разрабатываю веб-сайт для друга Это также помогает мне учиться. Я столкнулся с этой проблемой. Я установил видео в качестве основного фона, и оно отлично работает в компьютерных браузерах и Android браузерах (Chrome проверено только на android):
Вот код HTML:
<div class="video_box">
<div class="video_overlay"></div>
<video #videoElement [loop]="true" [muted]="true" [volume]="0.2" [autoplay]="true" playsinline id="bgVideo">
<source src="assets/bgVideo.mp4" type="video/mp4"/>
</video>
</div>
Вот код CSS:
.video_box {
top: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.video_box video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 53.5%;
left: 50%;
transform: translate(-50%,-50%);
}
.video_box .video_overlay {
top: 0;
position: absolute;
height: 100%;
z-index:1;
width: 100%;
background: #000000;
opacity: 0.5;
}
Он отлично загружается и, что наиболее важно, автоматически воспроизводится на рабочем столе / Android. Но на устройствах iOS, когда я обслуживаю свое приложение и подключаюсь к нему (независимо от браузера), оно не воспроизводится, только после взаимодействия с пользователем. (Если я нажму на свои собственные кнопки Mute или Play)
И, насколько мне известно, он уже соблюдает правила Safari или Chrome при отключении звука. (Тег тома не влияет на него, даже если я его удаляю).
Я пробовал хуки жизненного цикла, такие как ngOnInit или ngAfterViewInit, но применима та же история.
У меня закончились идеи. Заранее спасибо.