lunes, 25 de febrero de 2019

Etiqueta




La etiqueta <video> afecta a muchas partes de la web, SEO....

El elemento <track>

HTML5 nos permite especificar subtítulos para un video usando el <track>elemento. Los diversos atributos de este elemento nos permiten especificar cosas como el tipo de contenido que estamos agregando, el idioma en el que se encuentra y, por supuesto, una referencia al archivo de texto que contiene la información real de los subtítulos.

 WebVTT


Los archivos que contienen los datos de los subtítulos son archivos de texto simples que siguen un formato específico, en este caso el formato de las pistas de texto de video web (WebVTT). La especificación de WebVTT aún se está trabajando, pero las partes principales de ella son estables, por lo que podemos usarla hoy. convertidor en línea como srt2vtt .

CODIGO EJEMPLO

<video id="video" controls preload="metadata">
   <source src="video/sintel-short.mp4" type="video/mp4">
   <source src="video/sintel-short.webm" type="video/webm">
   <track label="English" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default>
   <track label="Deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt">
   <track label="Español" kind="subtitles" srclang="es" src="captions/vtt/sintel-es.vtt">
</video>

Kind: recibe un valor de subtitles, que indica el tipo de contenido que contienen los archivos.
Label se le asigna un valor que indica en qué idioma se encuentra el conjunto de subtítulos, por ejemplo, Englisho Deutsch- estas etiquetas aparecerán en la interfaz del usuario para que el usuario pueda seleccionar fácilmente el idioma.
srclang indica en qué idioma.
src: se le asigna una URL válida que apunta al archivo de subtítulos WebVTT.
Default: se establece en el <track>elemento inglés , lo que indica al navegador que esta es la definición de archivo de subtítulos predeterminada para usar cuando los subtítulos se han activado y el usuario no ha realizado una selección específica.


COMPLEMENTOS


Este moderno reproductor de video implementa subtítulos en formatos de archivo SRT y WebVTT.
Reproductor HTML5 compatible con WebVTT.
Este reproductor de video es muy usado y hace mucho más que simplemente admitir subtítulos de video. Es compatible con los formatos WebVTT, SRT y DFXP.
Otro reproductor de video completo que también admite subtítulos de video, aunque solo en formato SRT.
Este reproductor también admite subtítulos a través de archivos WebVTT y SRT.
Soporta subtítulos de video WebVTT.
Soporta subtítulos webVTT multi-idiomas

El <controls> agrega controles de video, como reproducir, pausar y volumen.

Es una buena idea incluir siempre width y height . Si la altura y el ancho no están configurados, la página puede parpadear mientras se carga el video.

El <source>elemento le permite especificar archivos de video alternativos entre los que el navegador puede elegir. El navegador utilizará el primer formato reconocido.

NO ACONSEJABLES EN ACCESIBILIDAD


autoplay: hace que el audio se reproduzca automáticamente.
loop: hace que el audio se repita automáticamente.



MUY IMPORTANTE


<video> no es compatible con Internet Explorer 8 y versiones anteriores.

No hay comentarios:

Publicar un comentario