Неправильная позиция webvtt при использовании CSS Translate для родителя (слайдер)

В моем проекте я использую swiper.js в качестве слайд-шоу, каждый слайд содержит либо изображение, либо видео html5 с подписями/субтитрами webvtt. При отладке мы заметили, что положение субтитров неправильное (слишком низкое, обрезает экран) в браузерах WebKit. После долгих отладок выяснилось, что это правило css3 для родительского div (swiper-wrapper) делает позицию vtt неправильно:

transform: translate3d(-1024px, 0px, 0px)

Когда вы вставляете видео в первый слайд, все идет хорошо, так как еще нет перевода css.

Похоже, это основная проблема webkit: позиционирование webvtt по умолчанию прерывается при использовании перевода css для родителя.

Обходной путь, который я нашел, состоит в том, чтобы добавить позиционирование строки в самом vtt к каждому элементу субтитров, например:

WEBVTT

00:00:02.160 --> 00:00:06.440 line:90%
hello world

00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles

Любое предложение без части «строка: 90%» частично отображается за кадром. Кажется, этот параметр заставляет парсер/рендерер webvtt устанавливать себя в правильную позицию.

ВОПРОС: кто-нибудь уже сталкивался с этой проблемой и есть ли другой (более простой) обходной путь для этой ошибки? Добавление части «строка:» ко всем субтитрам было бы адской работой ... если только не будет хорошего редактора, который может делать это в пакетном режиме.

ВОПРОС 2: Поскольку это похоже на ошибку синтаксического анализатора webkit vtt, кто-нибудь знает, куда лучше всего сообщить об этом?

Тестовая установка здесь: http://orgonemedia.nl/webvtt-bug/


swiper css-transforms webkit webvtt
person matiyin    schedule 09.03.2016    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

В настоящее время я отлаживаю некоторые файлы WebVTT для субтитров на английском и других языках. Столкнулся с похожей проблемой, но не могу сказать, в чем ее причина. Я собираюсь попробовать исправление линии: 90%, которое вы предложили здесь.

ОТВЕТ НА ВАШ ВОПРОС 1: Что касается работы по добавлению его ко всем субтитрам, вы будете рады узнать, что на самом деле это довольно просто с помощью правильного инструмента. Я использую Sublime Text Editor. Я бы сделал это с помощью «Найти все», чтобы найти все вхождения -->, а затем одновременно отредактировал каждую из этих строк, используя клавишу со стрелкой для перехода к нужному месту в строке (поскольку каждый субтитр вне- время такое же количество символов, 12), затем введите строку: 90%

ОБНОВЛЕНИЕ: Итак, я реализовал ваше предложение, используя метод, который я изложил, и он успешно переместил мои подписи.

Более подробная информация: у меня возникла проблема с тем, что субтитры были наполовину не в нижней части видео при просмотре на iPad. Как ни странно, просматривая ту же страницу на айфоне, они расположились правильно без каких-либо изменений. Однако изменение на 90% все же скорректировало его.

Интересно, что код строки:90% никак не влияет на настройку положения подписи при просмотре страницы в Chrome.

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

При редактировании субтитров с помощью редактора субтитров моего видеохостинга (я использую JWPlayer) временные коды отображаются как недействительные:

Изображение, показывающее редактор подписей с недопустимым предупреждением

person Shaun    schedule 06.04.2016