3

我已经研究并试验了我的大脑。我已经构建了一个工作应用程序，它使用 HTML5 画布来播放视频并通过网页（游戏等）与用户交互。像魅力一样工作，但我想为视频添加字幕以使其更易于访问。我什至似乎无法加载 WebVTT 文件，并且通过尝试来自网络的示例，我已经达到了巫毒编程的阶段，但没有取得任何进展。我试图在这里将应用程序提炼到最低限度，希望有人可以提供一些关于我做错了什么的见解。

当我单击画布时，视频播放，“...等待 cuechange 事件...”消息在播放时保持不变，然后在完成后转到“视频完成...重新加载以重试”消息（通过要求重新加载页面以再次尝试测试来保持简单），因此基本机制似乎正在工作。它永远不会进入文本轨道的“加载”函数（从不显示“...加载的文本轨道...”），并且永远不会调用 updateSubtitle() 函数。如果我插入一个 trackElement.readyStatus() 调用，它总是返回 0（不出所料）。作为进一步说明，如果我testStatus.innerHTML = "...loaded metadata...";在“loadedmetadata”侦听器中添加一条语句，它确实会到达那里。

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>

如果您想要我正在使用的视频和 WebVTT 文件（只需几秒钟），它们就在此处和此处（分别）。我还应该提到，如果我使用 VLC 播放视频，它会在视频上正确识别并播放 .vtt 文件作为字幕（因此它看起来格式正确）。如果这有什么不同的话，我正在 Windows 7 系统上的 Firefox 57.0.4（64 位）上运行我的测试（但我的印象是 Firefox 现在在涉及定时文本轨道的地方大部分是固定的）。

4

0 回答 0