Question

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

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

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文件（只需几秒钟），它们分别为here和here。我还要提一下，如果我使用VLC播放视频，它会识别并在视频上正确播放.vtt文件作为字幕（因此它看起来格式正确）。我在Windows 7系统上运行我对Firefox 57.0.4（64位）的测试，如果这有任何区别（但我认为Firefox现在主要针对定时文本轨道而修复）。

动态定时文本轨道，用于画布视频上的标题

0 个答案: