Javascript 画布视频字幕的动态定时文本跟踪

我已经研究和试验了我的大脑。我已经构建了一个工作应用程序，它使用HTML5画布来播放视频，并通过一个网页（一个游戏，某种程度上）与用户交互。工作起来很有魅力，但我想在视频中添加字幕，使其更容易访问。我甚至似乎都无法加载WebVTT文件，我已经通过尝试网络上的示例达到了伏都教编程的阶段，但没有取得任何进展。我试图将应用程序浓缩到最低限度，希望有人能提供一些关于我做错了什么的见解

当我点击画布时，视频播放，“…等待提示更改事件…”消息在播放时保持不变，然后在完成后转到“视频完成…重新加载以重试”消息（通过要求重新加载页面以重试测试来保持简单），因此基本机制似乎正在运行。它永远不会进入文本轨迹的“load”函数（永远不会显示“…loaded text track…”），并且永远不会调用updateSubtitle（）函数。如果插入trackElement.readyStatus（）调用，它总是返回0（毫不奇怪）。作为进一步说明，如果我添加一个

testStatus.innerHTML=“…加载的元数据…”语句，它确实到达了那里


var canvasContext、videoElement、intervalHandle、testStatus、trackElement；
函数processFrame（）{
canvasContext.drawImage（videoElement，193、50、256、194）；
}
函数videoEnded（）{
clearInterval（间隔句柄）；
testStatus.innerHTML=“视频完成…重新加载以重试”；
}
var计数=0；
函数updateSubtitle（事件）{
计数=计数+1；
testStatus.innerHTML=“count”+计数；
}
函数clickHandler（事件）{
testStatus.innerHTML=“…正在等待提示更改事件…”；
setAttribute（“src”、“start.ogg”）；
videoElement.load（）；
intervalHandle=setInterval（processFrame，25）；
videoElement.play（）；
}
函数init（）{
var canvasElement，textTrack；
canvasElement=document.createElement（“canvas”）；
videoElement=document.createElement（“视频”）；
videoElement.addEventListener（“loadedmetadata”，函数（）{
trackElement=document.createElement（“track”）；
trackElement.kind=“字幕”；
trackElement.label=“英语”；
trackElement.srclang=“en”；
trackElement.src=“启动\u en.vtt”；
trackElement.addEventListener（“加载”，函数（）{
testStatus.innerHTML=“…加载的文本跟踪…”；
trackElement.mode=“显示”；
});
videoElement.appendChild（trackElement）；
trackElement.addEventListener（“cuechange”，updateSubtitle，false）；
});
var mainDiv=document.getElementById（“arghMainDiv”）；
setAttribute（“id”、“mediaScreen”）；
canvasElement.width=640；
canvasElement.height=480；
第一个孩子；
if（mainDiv.hasChildNodes（））{
firstChild=mainDiv.firstChild；
mainDiv.insertBefore（canvasElement，第一个孩子）；
}否则{
firstChild=mainDiv.appendChild（canvasElement）；
}
testStatus=document.createElement（“p”）；
setAttribute（“id”、“testStatus”）；
mainDiv.insertBefore（testStatus，firstChild）；
testStatus.innerHTML=“单击画布进行测试”；
canvasContext=canvasElement.getContext（'2d'）；
canvasElement.addEventListener（“单击”，clickHandler）；
videoElement.addEventListener（“结束”，videoEnded）；
}

#fatalError{
颜色：红色；
}
#阿格迈迪夫{
文本对齐：居中；
}
#媒体屏幕{
边框：5px实心#303030；
左边距：自动；
右边距：自动；
显示：块；
游标：默认值；
}

TextTrack对象的问题