Как настроить мобильный Safari для отображения скрытых субтитров к видео на веб-странице

У меня есть видео с субтитрами, встроенное с YouTube на моем веб-сайте, которое будет отображать субтитры при просмотре в Safari на настольном компьютере. Когда я просматриваю веб-страницу в Safari на iPhone 6, подписи не отображаются.

Я щелкнул маленький значок в правом нижнем углу нижней серой панели для «Субтитры и CC» и установил его на «Английский».

Я включил настройки iPhone > Общие > Специальные возможности > Мультимедиа > Субтитры и субтитры и тип по умолчанию.

  • Если щелкнуть видео и просмотреть его с помощью приложения YouTUBE на моем iPhone, будут показаны подписи, но я также хотел бы, чтобы они отображались при просмотре непосредственно с веб-страницы.

Не уверен, что это проблема iPhone, проблема Safari, проблема YouTube или требуется простое редактирование кода iframe/встраивания на моей веб-странице.

У меня есть «&cc_load_policy=1» как часть моего тега src.

  • iOS/Safari и iOS/Chrome также НЕ отображают закрытые титры для видео-js на веб-странице.

Кто-нибудь там сталкивался с этим?

Скорее всего, это проблема с тем, как встроенное веб-видео воспроизводится на устройствах iOS. Является ли видео кадрированием только на веб-странице или вы создаете видеопроигрыватель js, подключенный к видео YouTube? Какую версию видео-js вы используете?
У меня есть видео на YouTube, встроенное в iframe, а затем еще одно видео на нашем сервере в div с использованием video-js. видео-js 4.3.0
Еще один вопрос: вы хотите сделать это для ЛЮБОГО видео (почти невозможно) или только для видео, кодирование которых вы контролируете?
только видео, которые мы контролируем, и все они в формате mp4
Вы знаете, кодируются ли видео CAE-608? Вы собираетесь размещать видео самостоятельно или использовать Youtube? Вы пробовали веб-страницу, которую я указал в своем ответе ниже, чтобы узнать, работает ли она для вас?

Ответы (1)

Во-первых, вам нужно понять, что есть несколько способов добавить скрытые субтитры к видео. Если вы смотрите конкретно на iOS, то видео должно соответствовать стандарту кодирования CEA-608 и должно быть либо HTTP Live Stream (HLS), либо видео MP4. Другие форматы видео НЕ БУДУТ работать на iOS в качестве встроенного видео, если вам нужно воспроизведение CC.

Если видео соответствует одному из этих стандартов, то речь идет о настройках воспроизведения, установленных для веб-страницы HTML5.

Если вы хотите встроить видео YouTube на свою страницу. Вам необходимо убедиться, что в видео есть существующая дорожка с закрытыми титрами (а не одна из автоматически переведенных на лету).

Ниже приведен пример веб-страницы, на которой должен воспроизводиться трейлер к фильму «Марсианин», для которого была создана дорожка с субтитрами.

Я проверил, что эта страница работает на моем настольном компьютере Mac с Safari и Chrome, ноутбуке с Windows 7 с Chrome, iPhone 6 с iOS 9.2 и iPad Air с iOS 8.4.1.

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <div style="overflow:hidden;height:270px;width:400px;">
            <div id="youtube_canvas" style="height:270px;width:400px;">
                <iframe style="height:270px;width:400px;border:0;" frameborder="0" src="https://www.youtube.com/embed/aIL01wrwq6w?hl=en&amp;autoplay=1&amp;cc_load_policy=1&amp;loop=0&amp;fs=1&amp;showinfo=0"></iframe>
            </div>
            <style>#youtube_canvas img{max-width:none!important;background:none!important}</style>
        </div>
    </body>
</html>

Бит кода ключа для видео на YouTube — это то, что &cc_load_policy=1вы уже нашли.

Но если видео, на которое вы ссылаетесь, не соответствует спецификациям исходного видео, вы никогда не увидите текст CC в iOS. Родной ютубовский плеер будет проигрывать видео не в стандарте CAE-608, а iOS через веб-плеер - нет.

Если вам нужно сделать это для ваших собственных видео, вам нужно убедиться, что ваш кодировщик создает встроенную дорожку CEA-608 CC.

Надеюсь, это поможет.