Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Matt Bloomer
Matt Bloomer
10,608 Points

captions

I put a video on a page that I am working on. I was not able to get it working through the techniques used on treehouse, and a friend of mine showed me another way which worked using an iframe. I am now trying to do captions, but am unable to link them to the page. I was wondering if someone was able to show me the correct code using a video tag so I could link it the way shown in your videos, or if they can show me how to link it as is. Here is my code:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matt Bloomer| Designer</title> <style> thead {color:orange;} tbody {color: blue;} tfoot{color: green} table, th, td{ border: 2px solid black; }

</style>

</head> <body> <header>

<h1>Matt Bloomer</h1>
<h2>A great person! </h2> </a> <nav> <ul> <li><a href="index.html">intelligence</a></li> <li><a href="about.html">kind</a></li> <li><a href="hooka.html">funny</a></li> </ul> </nav> </header> <section> <p>This is my first website; I hope you like it. If you don't, you can fuck off. </p> </section>

<table> <caption>My Life</caption> <thead> <tr> <th>Year</th> <th>Location</th> <th>Girlfriend</th> <th>School/Job</th> </tr> </thead>

<tfoot>
  <tr>
  <td colspan="9">"Ups and downs, strikes and gutters" -the Dude.</td>
  </tr>
</tfoot>

<tbody>
  <tr>
    <td>2002</td>  
    <td>Lawrence</td>
    <td>Holly</td>
    <td>KU</td>
  </tr>
  <tr>
    <td>2004</td>
    <td>Wichita</td>
    <td>Gloria</td>
    <td>Wichita State</td>
  </tr>
  <tr>
    <td>2007</td>
    <td>Liberty</td>
    <td>Melanee</td>
    <td>Dunbar</td>
    </tr>
    <tr>
      <td>2009</td>
      <td>South KC</td>
      <td>none</td>
      <td>none</td>
  </tr>
  <tr>
      <td>2015</td>
      <td>Blue Springs</td>
      <td>Sharon</td>
      <td>UCM</td>
  </tr>
</tbody>

</table>

<h1>Kansas basketball</h1> <iframe width="700" height="415" scrolling="yes" src="https://www.youtube.com/embed/KhJF5vvltzU" frameborder="0" allowfullscreen></iframe>

<track label="English" kind="subtitles" srclang="en" src="DreamOn.vtt" default/>

</video> <footer> <p>© 2015 Matt Bloomer.</p> </footer>

</body> </html>

and the captions: WEBVTT FILE

0 00:00:03.000 -->00:00:05.000 [Dream On]

1 00:00:14.000 -->00:00:17.000 [James Naismith]

2 00:00.21.000 -->00:00:23.000 [awesome mustache guy]

3 00:00:26.000 -->00:00:28.000 [hot chicks]

4 00:00:49.000 -->00:00:52.00 [Naismith and Allen]

5 00:01:26.000 -->00:01:39.000 [Wilt Chamberlain]

6 00:01:39.010 -->00:01:49.000 [Larry Brown]

7 00:01:55.000 -->00:02:18.000 ['88 championship]

8 00:02:19.000 -->00:02:43.000 ['08 championship]

9 00:02:45.000 -->00:06:23.000 [Aerosmith]

10 00:06:24.000 -->00:08:53.000 [Rock Chalk, bitches!]

Thanks for any help you can provide.

2 Answers

Will Long
Will Long
5,449 Points
Will Long
Will Long
5,449 Points

Hello Matt, well first of all, you should start a .vtt page to start on captions, then you should listen to it and just plug in the captions to the correct timing. There is a useful track in library HTML called HTML Video and Audio too.

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

Sorry about that; I thought that it was showing. Here is my vtt:

WEBVTT FILE

0 00:00:03.000 -->00:00:05.000 [Dream On]

1 00:00:14.000 -->00:00:17.000 [James Naismith]

2 00:00.21.000 -->00:00:23.000 [awesome mustache guy]

3 00:00:26.000 -->00:00:28.000 [hot chicks]

4 00:00:49.000 -->00:00:52.00 [Naismith and Allen]

5 00:01:26.000 -->00:01:39.000 [Wilt Chamberlain]

6 00:01:39.010 -->00:01:49.000 [Larry Brown]

7 00:01:55.000 -->00:02:18.000 ['88 championship]

8 00:02:19.000 -->00:02:43.000 ['08 championship]

9 00:02:44.000-->00:03:03.000 [Allen Fieldhouse]

10 00:02:45.000 -->00:06:23.000 [Aerosmith]

11 00:06:24.000 -->00:08:53.000 [Rock Chalk, bitches!]

and here is the tracking:

<h1>Kansas basketball</h1> <iframe width="700" height="415" scrolling="yes" src="https://www.youtube.com/embed/KhJF5vvltzU" frameborder="0" allowfullscreen></iframe>

<track label="English" kind="subtitles" srclang="en" src="DreamOn.vtt" default/>

I am doing it with an i frame. I tried doing it how the videos went over it, but it didn't work. Any ideas would be appreciated.