Treehouse Code Adventures > An Interactive Video Transcript

An Interactive Video Transcript

An interactive video transcript designed to enhance the viewer's experience by allowing them to interact with the content. Utilize HTML, CSS, and JavaScript to create a seamless interface that will integrate the transcript with the video playback.

Start Adventure

Created: 11/06/2023 by Brian Jensen

Skill level: intermediate

Topics used: HTML CSS JavaScript

Estimated completion time: 4 Hours

HTML Basics

Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.

CSS Basics

Learn the basics of CSS, one of the core technologies for designing and building websites and applications.

HTML Video and Audio

In this course, we're going to spend most of our time focusing on the video and audio elements. We'll learn about a few others, but those two allow us to embed video and sound content into webpages.

MediaElement.js

MediaElement.js is a blazing fast and amazingly powerful HTML5 audio and video library that creates a unified feel for media files.

0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
1
Implement the MediaElement.js framework, a custom video player, or another video player library.
2
Include, at minimum, the following features: play, pause, full-screen toggle, volume controls, and a progress bar.
3
Ensure the video and all features work in at least three browsers.
4
Copy and paste the text from the captions.vtt file as a code comment block into your index.html file.
5
Use  tags for each section of text from the captions.vtt file, and wrap all those  tags inside of a pair of  tags that can act as a container.
6
Add a data-start and data-end attribute to each span tag.
7
Now, you can use the timestamps from the captions.vtt file for the values of the data-start and data-end attributes.
8
You'll be using JavaScript to reference these numbers, so the formatting needs to be changed. Things like colons or unnecessary leading zeros should be removed. For example, the first timestamp in the captions.vtt file looks like this: 00:00:00.002 ––> 00:00:03.157. With that example, your first span element would have these data attributes: 
9
As the media playback time changes, sentences (individual spans) in the transcript should be highlighted. Use JavaScript to listen for those changes and apply a highlight to the appropriate sentence.
10
Extra Challenge: The video skips to the proper place in the video when a span is clicked.
11
Extra Challenge: Add a color theme or other customizations to the video player's control icons.