Video + text tracks via .vtt file

p5.js Coding Questions
1

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:

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.

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.

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

    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.

 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);
2

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

  //  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
            );
        }
    });
1 Like
3

got it all working.

I had to add track.default = " ";

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();

}
1 Like