Heads up! To embark on an Adventure or participate further, sign in with your Treehouse account or enroll in your free, 7-day trial.

Treehouse Code Adventures > An Interactive Video Transcript

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.

Created: 11/06/2023 by Brian Jensen

Skill level: intermediate

Topics used: HTML CSS JavaScript

Estimated completion time: 4 Hours

    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.

  1. 0

    To begin, click "Start Adventure" at the top of the page and then download your starter files.

  2. 1

    Implement the MediaElement.js framework, a custom video player, or another video player library.

  3. 2

    Include, at minimum, the following features: play, pause, full-screen toggle, volume controls, and a progress bar.

  4. 3

    Ensure the video and all features work in at least three browsers.

  5. 4

    Copy and paste the text from the captions.vtt file as a code comment block into your index.html file.

  6. 5

    Use <span> tags for each section of text from the captions.vtt file, and wrap all those <span> tags inside of a pair of <p> tags that can act as a container.

  7. 6

    Add a data-start and data-end attribute to each span tag.

  8. 7

    Now, you can use the timestamps from the captions.vtt file for the values of the data-start and data-end attributes.

  9. 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: <span data-start="0.002" data-end="3.157"></span>

  10. 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.

  11. 10

    Extra Challenge: The video skips to the proper place in the video when a span is clicked.

  12. 11

    Extra Challenge: Add a color theme or other customizations to the video player's control icons.