Treehouse Code Adventures > Una Transcripción de Video Interactiva

Una Transcripción de Video Interactiva

Una transcripción de video interactiva diseñada para mejorar la experiencia del espectador permitiéndoles interactuar con el contenido. Utiliza HTML, CSS y JavaScript para crear una interfaz sin interrupciones que integrará la transcripción con la reproducción de video.

Comienza la Aventura

Creado: 11/06/2023 por Brian Jensen

Nivel de habilidad: intermedio

Temas utilizados:

Tiempo estimado de finalización: 4 horas

Conceptos Básicos de HTML

Aprende HTML (Lenguaje de Marcas de Hipertexto), el idioma común de todos los sitios web. HTML describe la estructura básica y el contenido de una página web.

Conceptos Básicos de CSS

Aprende los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones.

Video y audio HTML

En este curso, vamos a pasar la mayor parte del tiempo enfocándonos en los elementos de video y audio. Aprenderemos sobre algunos otros, pero esos dos nos permiten incrustar contenido de video y sonido en páginas web.

MediaElement.js

MediaElement.js es una biblioteca HTML5 de audio y video increíblemente rápida y poderosa que crea una experiencia unificada para archivos multimedia.

0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
1
Implementar el MediaElement.js marco de trabajo, un reproductor de video personalizado, u otra biblioteca de reproductor de video.
2
Incluir, como mínimo, las siguientes características: reproducción, pausa, alternar pantalla completa, controles de volumen y una barra de progreso.
3
Asegurar que el video y todas las características funcionen en al menos tres navegadores.
4
Copiar y pegar el texto de captions.vtt archivo como un bloque de comentario de código en su archivo index.html.
5
Usar  etiquetas para cada sección de texto de captions.vtt archivo, y envolver todas esas  etiquetas dentro de un par de  etiquetas que puedan actuar como contenedor.
6
Agregar un atributo data-start y data-end a cada etiqueta span.
7
Ahora, puede usar las marcas de tiempo de captions.vtt archivo para los valores de los atributos data-start y data-end.
8
Estará usando JavaScript para hacer referencia a estos números, por lo que el formato debe cambiarse. Cosas como dos puntos o ceros iniciales innecesarios deben eliminarse. Por ejemplo, la primera marca de tiempo en captions.vtt archivo se ve así: 00:00:00.002 ––> 00:00:03.157. Con ese ejemplo, su primer elemento span tendría estos atributos de datos: 
9
Conforme cambia el tiempo de reproducción multimedia, las oraciones (espacios individuales) en la transcripción deben resaltarse. Use JavaScript para escuchar esos cambios y aplicar un resaltado a la oración apropiada.
10
Desafío Extra: El video salta al lugar correcto en el video cuando se hace clic en un span.
11
Desafío Extra: Agregar un tema de color u otras personalizaciones a los iconos de control del reproductor de video.