Dynamic timed text track for captions on canvas video

Question

I have researched and experimented my brains out on this one. I have built a working application that uses the HTML5 canvas to play videos and interact with users through a web page (a game, sort of). Works like a charm, but I want to add captions to the video to make it more accessible. I don't even seem to be able to get the WebVTT file to load and I've reached the stage of voodoo programming by trying examples from the web and am making no progress. I have tried to distill the application down to its bare minimum here in hopes someone can provide some insight into what I'm doing wrong.

The video plays when I click on the canvas, the "...waiting for cuechange event..." message stays up while it plays, and then it goes to the "video complete ... reload to try again" message when done (kept it simple by requiring a page reload to try the test again), so the basic mechanics seem to be working. It never gets into the "load" function for the text track (never displays "... loaded text track ..."), and the updateSubtitle() function is never invoked. If I insert a trackElement.readyStatus() call, it always returns 0 (unsurprisingly). As a further note, if I add a testStatus.innerHTML = "...loaded metadata..."; statement in the "loadedmetadata" listener, it does get there.

var canvasContext, videoElement, intervalHandle, testStatus, trackElement;

function processFrame() {
    canvasContext.drawImage(videoElement, 193, 50, 256, 194);
}

function videoEnded() { 
    clearInterval(intervalHandle);
    testStatus.innerHTML = "video complete ... reload to try again";
}

var count = 0;

function updateSubtitle(event) {
    count = count + 1;
    testStatus.innerHTML = "count" + count;
}

function clickHandler(event) {
    testStatus.innerHTML = "...waiting for cuechange event...";
    videoElement.setAttribute("src", "start.ogg");
    videoElement.load();
    intervalHandle = setInterval(processFrame, 25);
    videoElement.play();
}

function init() {
    var canvasElement, textTrack;

    canvasElement = document.createElement("canvas");
    videoElement = document.createElement("video");
    videoElement.addEventListener("loadedmetadata", function() {
 trackElement = document.createElement("track");
 trackElement.kind = "captions";
 trackElement.label = "English";
 trackElement.srclang = "en";
 trackElement.src = "start_en.vtt";
 trackElement.addEventListener("load", function() {
     testStatus.innerHTML = "... loaded text track ...";
     trackElement.mode = "showing";
 });
 videoElement.appendChild(trackElement);
 trackElement.addEventListener("cuechange", updateSubtitle, false);
    });

    var mainDiv = document.getElementById("arghMainDiv");

    canvasElement.setAttribute("id", "mediaScreen");
    canvasElement.width = 640;
    canvasElement.height = 480;

    var firstChild;
    if(mainDiv.hasChildNodes()) {
 firstChild = mainDiv.firstChild;
 mainDiv.insertBefore(canvasElement, firstChild);
    } else {
 firstChild = mainDiv.appendChild(canvasElement);
    }

    testStatus = document.createElement("p");
    testStatus.setAttribute("id", "testStatus");
    mainDiv.insertBefore(testStatus, firstChild);
    testStatus.innerHTML = "click on canvas to test";

    canvasContext = canvasElement.getContext('2d');
    canvasElement.addEventListener("click", clickHandler);
    videoElement.addEventListener("ended", videoEnded);
}

#fatalError {
    color: red;
}

#arghMainDiv {
    text-align: center;
}

#mediaScreen {
    border: 5px solid #303030;
    margin-left: auto;
    margin-right: auto;
    display: block;
    cursor: default;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"> 
    <title>Problems With TextTrack Object</title>
    <link rel="stylesheet" type="text/css" href="subargh.css">
    <script src="subargh.js"></script>
  </head>

  <body onload="init()">
    <div id="arghMainDiv">
    </div>
  </body>
</html>

If you want the video and WebVTT files I'm using (just a few seconds long), they are here and here (respectively). I should also mention that if I play the video using VLC, that it recognizes and plays the .vtt file as subtitles properly on the video (so it appears to be well-formed). I am running my tests on Firefox 57.0.4 (64-bit) on a Windows 7 system if that makes any difference (but I am under the impression that Firefox is mostly fixed where Timed Text Tracks are concerned now).

Dynamic timed text track for captions on canvas video

0 Answers0