Удалить фоновые HTML5-видео /WEBVTT субтитры на iOS iPhone/iPad

Question

У меня есть видео HTML5 с трек-элементом для субтитров в формате webvtt. Как удалить черный фон за субтитрами на iOS/iPhone/iPad? В браузерах на ПК я могу удалить его с помощью CSS::cue{background: transparent;}

Спасибо за помощь

Answer 1

Думаю, я нашел решение. Мне потребовалось несколько дней и много поисков в Google, чтобы наконец понять это.

Это связано с системными настройками MacOS(iOS) и тем, как отображать подписи.

Чтобы исправить это, перейдите по ссылке:

Системные настройки Mac -> Специальные возможности -> Подписи -> Измените "Прозрачный фон" на "Классический".

Вам нужно будет закрыть вкладку браузера или приложение, чтобы оно вступило в силу. Я обнаружил, что субтитры в проигрывателе HTML были без фона до следующего утра, потому что я не закрыл вкладку раньше.

Если бы я снова изменил настройку, я бы этого не узнал.:)

Answer 2

Safari использует -webkit-media-text-track-display-background для фона. Обратите внимание на! Важный, который отвергает присущий Safari стиль.

video::-webkit-media-text-track-display-backdrop {
  background-color: rgba(0,0,0,0) !important;
}

Answer 3

Попробуй это:

video::-webkit-media-text-track-display{background-color: transparent;} 

На IOS7 работает правильно.