I'm trying to do a follow-along with my text book. It has us input a video clip and then add VTT (video text track). The video plays fine, but I cannot get the VTT to display. The code is EXACTLY as the text book shows it. I have selected the Closed Captioning button and turned it on/off several times. The VTT code is entered as the book shows, the VTT is applied to the video in my html page. And the file is label correctly.
Code for reference.
From cp_royal.html
Click the play button to view this classic dance sequence.
To play this video clip, your browser needs to support HTML5.
From cp_captions.vtt
Title
00:00.500 --> 00:04.000 line:5% align:middle
The Ceiling Dance
Subtitle
00:04.500 --> 00:08.000 line:5% align:middle
from Royal Wedding (1951)
Ending
01:38.000 --> 01:44.000 line:80% position:95% align:end
See more videos at Cinema Penguin
I'm trying to do a follow-along with my text book. It has us input a video clip and then add VTT (video text track). The video plays fine, but I cannot get the VTT to display. The code is EXACTLY as the text book shows it. I have selected the Closed Captioning button and turned it on/off several times. The VTT code is entered as the book shows, the VTT is applied to the video in my html page. And the file is label correctly.
Code for reference.
From cp_royal.html
<p>Click the play button to view this classic dance sequence.</p>
<video controls poster="cp_photo2.png">
<source src="cp_dance.mp4" type="video/mp4" />
<source src="cp_dance.webm" type="video/webm" />
<track kind="captions" label="Dance Captions" src="cp_captions.vtt" default />
<p><em>To play this video clip, your browser needs to support HTML5.</em></p>
</video>
From cp_captions.vtt
Title
00:00.500 --> 00:04.000 line:5% align:middle
The Ceiling Dance
Subtitle
00:04.500 --> 00:08.000 line:5% align:middle
from Royal Wedding (1951)
Ending
01:38.000 --> 01:44.000 line:80% position:95% align:end
See more videos at Cinema Penguin