# Video + text tracks via .vtt file

**URL:** https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324
**Category:** Coding Questions
**Created:** [May 26, 2020, 7:19pm UTC](https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324 "2020-05-26T19:19:30Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![stephanschulz](https://avatars.discourse-cdn.com/v4/letter/s/d9b06d/32.png) [@stephanschulz](https://discourse.processing.org/u/stephanschulz)
#### Post date: [May 26, 2020, 7:19pm UTC](https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324/1 "2020-05-26T19:19:30Z")

</div>

I am using createVideo to load in a new video file.  
At the same time I would like to generate a text track and attach it to the video, so when it plays back I can see the text for each time cue and read the cue data via code.  
I have a valid .vtt file containing timecode and text data:

```auto
WEBVTT

0
00:00.000 --> 00:00:00.015
hello 1
1
00:00:00.015 --> 00:00:00.130
hello 2

```

I know I can use `myVideo.addCue(0.5, changeText, "hello,");` but that’s not the same as html5 and .vtt texttrack data.

> **[Getting Started With the Track Element - HTML5 Rocks](https://www.html5rocks.com/en/tutorials/track/basics/)**
>
> The track element provides a simple, standardized way to add subtitles and captions to video and audio, but can also be used with other kinds of timed data, to improve searchability and enable deep linking.

The following code works to display tracks on top of video, but only if the track is already defined in the HTML file. Generating the tag does not make it work.

```auto
   <track id="track1" label="English subtitles" kind="captions" src="entrack.vtt" srclang="en" default>

```

```auto
    track1 = document.getElementById("track1");
    //track1 = document.createElement("TRACK");
    track1.id="track1";
    track1.kind = "captions";
    track1.src = "./assets/text.vtt";
    track1.label = "English subtitles";
    track1.srclang = "en";
    track1.type = "text/vtt";
    myVideo.child(track1);

```

Also reading a cue does not work.

```auto
 track1.addEventListener("cuechange", function () {

        var myCues = myVideo.child()[1].activeCues; // array of current cues.
        console.log("myCues.length "+myCues.length);

        if (myCues.length > 0) {
            console.log(" myCues[0].startTime " + myCues[0].startTime);
        }
    }, false);

```

---

<div class="post-metadata">

### Author: ![stephanschulz](https://avatars.discourse-cdn.com/v4/letter/s/d9b06d/32.png) [@stephanschulz](https://discourse.processing.org/u/stephanschulz)
#### Post date: [May 27, 2020, 12:54am UTC](https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324/2 "2020-05-27T00:54:04Z")

</div>

This seems to work now for reading the .vtt cue data.  
still have to figure out why `createElement` is not working

```auto
  // track = createElement("track");
     track = document.getElementById("track");

    track.id="track";
    track.kind = "captions";
    track.src = "./assets/text.vtt";
    track.label = "English subtitles";
    track.srclang = "en";
    track.type = "text/vtt";

    track.mode = "showing";

    recorded_videos[recorded_videos.length - 1].child(track);

    track.addEventListener("load", function(event) {
        event.target.track.mode = "showing"; //"showing";
        // recorded_videos[recorded_videos.length - 1].textTracks[0].mode = "showing"; // thanks Firefox
        console.log("track loaded + showing");
    });

    track.addEventListener("cuechange", function(event) {
        let cues = event.target.track.activeCues;
        console.log("activeCues.length " + cues.length);
        if (cues.length > 0) {
            console.log(
                cues[0].startTime +
                " --> " +
                cues[0].endTime +
                " " +
                cues[0].getCueAsHTML().textContent
            );
        }
    });

```

---

<div class="post-metadata">

### Author: ![stephanschulz](https://avatars.discourse-cdn.com/v4/letter/s/d9b06d/32.png) [@stephanschulz](https://discourse.processing.org/u/stephanschulz)
#### Post date: [May 27, 2020, 1:44pm UTC](https://discourse.processing.org/t/video-text-tracks-via-vtt-file/21324/3 "2020-05-27T13:44:02Z")

</div>

got it all working.

I had to add `track.default = " ";`

```auto
function videoLoad() {
    //https://editor.p5js.org/makerslab/sketches/Cu4TrKwJI
    //https://www.html5rocks.com/en/tutorials/track/basics/
    console.log("videoLoad()");

    recorded_videos[recorded_videos.length - 1].id("video1");

    // track1 = document.createElement("track1");
    // let track2 = document.getElementById("track2");

    console.log("addEventListener start");

    // let dom_video = document.getElementById("video1");
    track1 = document.createElement("track");
    // track1 = document.getElementById("track2");
    // console.log(track2);

    track1.id = "track1";
    track1.label = "English subtitles";
    track1.kind = "captions";
    // track1.src =
    // "https://cdn.glitch.com/d26f7cbb-66cd-4bc4-b055-829c95f47067%2Ftext.vtt?v=1590512547513"; //"./assets/text.vtt";
    track1.src = "./assets/text.vtt";
    track1.srclang = "en";
    track1.type = "text/vtt";
    track1.default = " ";

    console.log("track1");
    console.log(track1);

    // dom_video.appendChild(track1);
    recorded_videos[recorded_videos.length - 1].child(track1);

    track1.addEventListener("load", function() {
        console.log("track1.addEventListener");
        track1.mode = "showing";
        recorded_videos[recorded_videos.length - 1].textTracks[0].mode = "showing"; // thanks Firefox
    });

    console.log("addEventListener mid");

    track1.addEventListener("cuechange", function(event) {
        let cues = event.target.track.activeCues;
        console.log("activeCues.length " + cues.length);
        if (cues.length > 0) {
            console.log(
                cues[0].startTime +
                " --> " +
                cues[0].endTime +
                " " +
                cues[0].getCueAsHTML().textContent
            );

            var res = str.split(",");

                        drawVideoFile(_midEye, _dist, _angle)
        }
    });

    console.log("addEventListener end");

    recorded_videos[recorded_videos.length - 1].loop();
    recorded_videos[recorded_videos.length - 1].hide();

}

```