Cómo configurar Safari móvil para mostrar subtítulos en videos en la página web

Tengo un video de subtítulos ocultos incrustado de YouTube en mi sitio web que mostrará los subtítulos cuando se vea en Safari en una computadora de escritorio. Cuando veo la página web en Safari en el iPhone 6, los subtítulos no aparecen.

Hice clic en el pequeño ícono en la parte inferior derecha de la barra gris inferior para "Subtítulos y CC" y lo configuré en "Inglés".

Configuré la configuración de mi iPhone> General> Accesibilidad> Medios> Subtítulos y subtítulos en encendido y tipo predeterminado.

  • Al hacer clic en el video y verlo con la aplicación de YouTube en mi iPhone, se mostrarán los subtítulos, pero también me gustaría que se muestren cuando se vean directamente desde la página web.

No estoy seguro de si se trata de un problema de iPhone, un problema de Safari, un problema de YouTube o si requiere una simple edición del iframe/código de inserción en mi página web.

Tengo "&cc_load_policy=1" como parte de mi etiqueta src.

  • iOS/Safari e iOS/Chrome tampoco muestran subtítulos para videos de video-js en la página web.

¿Alguien por ahí se ha encontrado con esto?

Lo más probable es que se deba a un problema con la forma en que se reproduce el video incrustado en la web en los dispositivos iOS. ¿El video está enmarcado solo en la página web, o está enmarcando un reproductor de video-js conectado al video de YouTube? ¿Qué versión de video-js estás usando?
Tengo un video de YouTube incrustado con iframe y luego otro video en nuestro servidor en un div usando video-js. video-js es 4.3.0
Otra pregunta, ¿estás buscando hacer esto para CUALQUIER video (casi imposible), o solo videos cuya codificación controlas?
solo los videos que controlamos y todos son mp4
¿Sabes si los videos están codificados en CAE-608? ¿Vas a alojar los videos tú mismo o vas a usar Youtube? ¿Probó la página web que puse en mi respuesta a continuación para ver si funciona para usted?

Respuestas (1)

Primero, debe comprender que hay un par de formas en que se pueden agregar subtítulos a un video. Si está buscando iOS específicamente, entonces el video debe cumplir con el estándar de codificación CEA-608 y debe ser HTTP Live Stream (HLS) o video MP4. Otros formatos de video NO funcionarán en iOS como un video incrustado si necesita reproducción CC.

Si el video cumple con uno de esos estándares, entonces se trata de la configuración de reproducción establecida para la página web HTML5.

Si está buscando incrustar un video de YouTube en su página. Debe verificar que el video tenga una pista de subtítulos ocultos existente (no una de las traducidas automáticamente sobre la marcha).

A continuación se muestra un ejemplo de una página web que debe reproducir un avance de película de "The Martian" que tiene una pista de subtítulos creados para ella.

He verificado que esta página funciona en mi Mac de escritorio con Safari y Chrome, una computadora portátil con Windows 7 con Chrome, un iPhone 6 con iOS 9.2 y un iPad Air con 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>

El bit de código clave para los videos de YouTube es el que &cc_load_policy=1ya ha encontrado.

Pero si el video al que se ha vinculado no cumple con las especificaciones del video original, nunca verá el texto CC en iOS. El reproductor nativo de YouTube reproducirá videos que no estén en el estándar CAE-608, pero iOS a través de un reproductor web no lo hará.

Si necesita hacer esto para sus propios videos, debe asegurarse de que su codificación cree una pista CC incrustada CEA-608.

Espero que esto ayude.

Cómo configurar Safari móvil para mostrar subtítulos en videos en la página web
RespuestasAquíPolítica de privacidad1y, 0v