Question

我无法获取从WebVTT文件中读取元数据的工作示例，该文件由HTML5页面中<track>的{{1}}元素指定。为了清楚起见，我不是在谈论从视频文件本身读取元数据（例如，与MPEG传输流一样）。我所说的是用于字幕视频的<video>元素。 <track>的一个属性是<track>，可以指定为以下任何值：

字幕
描述
字幕
导航
章节
元数据

我正在尝试使用元数据类型来访问存储在相应WebVTT文件中的文本，我打算使用JavaScript进行操作。我知道这是可能的，因为它是mentioned by Silvia Pfeiffer以及by the maker of Captionator，这是我用来实现解释kind标记功能的JavaScript polyfill。但是，我无法让它发挥作用。

我的代码基于Captionator文档的标题示例。我添加了一个按钮来检索元数据并在单击按钮时显示它。不幸的是，它一直显示“未定义”而不是元数据。任何想法我可能做错了什么？或者，有没有人知道我可以看看哪个工作示例？我在任何地方都找不到。

如果您想看一下我的代码，我将其包含在下面：

<track>

我的WebVTT文件如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5 Video Closed Captioning Example</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="js/Captionator-v0.5-12/css/captions.css"/>
    </head>
    <body>
        <h1>HTML5 Video Closed Captioning Example</h1>
        <div>
            <p id="metadataText">Metadata text should appear here</p>
            <input type='button' onclick='changeText()' value='Click here to display the metadata text'/>
        </div>

        <video controls autobuffer id="videoTest" width="1010" height="464">
            <source src="http://localhost:8080/Videos/testVideo.webm" type="video/webm" />
            <source src="http://localhost:8080/Videos/testVideo.mp4" type="video/mp4" />

            <!-- WebVTT Track Metadata Example -->
            <track label="Metadata Track" kind="metadata" src="http://localhost:8080/Videos/Timed_Text_Tracks/testVideo_metadata.vtt" type="text/webvtt" srclang="en" />
        </video>

        <!-- Include Captionator -->
        <script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator.js"></script>

        <!-- Example Usage -->
        <script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator-example-api.js"></script>
        <script type="text/javascript">
            window.addEventListener("load",function() {
                captionator.captionify(null,null,{
                    debugMode: !!window.location.search.match(/debug/i),
                    sizeCuesByTextBoundingBox: !!window.location.search.match(/boundingBox/i),
                    enableHighResolution: !!window.location.search.match(/highres/i),
                });

                var videoObject = document.getElementsByTagName("video")[0];
                videoObject.volume = 0;
                document.body.appendChild(generateMediaControls(videoObject));  
            },false);

            function changeText() {
                document.getElementById('metadataText').innerHTML = testVar;
                var cueText = document.getElementById("video").tracks[0].activeCues[0].getCueAsSource();
                document.getElementById('metadataText').innerHTML = cueText;
            }
        </script>
    </body>
</html>

Answer 1

你访问提示的方式是正确的 - 那里没有问题（虽然Captionator 0.6从.tracks属性到.textTracks属性会有更改，但更符合如果你能承受偶尔的错误，我会建议使用0.6来提高其标准 - 我已经编写了下面的代码来使用.textTracks - 如果你想继续使用，请替换.tracks稳定的分支。）

该问题涉及文本轨道本身的加载。目前，你实际上并没有告诉Captionator加载曲目。因为这是异步发生的，并且在请求时，存在不可避免的延迟，其内容不可用，您需要以适应加载时间和潜在负载错误的方式编写代码。

你也没有等待Captionator本身加载 - 潜在的用户可能会在发生这种情况之前不知不觉地点击按钮 - 触发了一个令人讨厌的JavaScript错误。在本地盒子上进行测试时，这不会是一个问题，但是一旦你部署到互联网上，你就会看到各种各样的竞争条件和其他恶意。在页面和标题数据都已加载之前，请考虑禁用该按钮。

我已经尝试使Captionator API尽可能接近实际的JS API，它将很快登陆浏览器 - 所以将来这将与您与本机浏览器功能的交互方式相同。只要功能本身可用，Captionator就会退出，并且您的代码应（假设它们不会再次更改API！）只需使用本机API。

首先，您需要实际请求Captionator加载内容。这是我将曲目的“显示模式”设置为SHOWING或2。

var video = document.getElementByID("myVideo");
video.textTracks[0].mode = 2; // SHOWING

或者，您可以将曲目的状态分配给HIDDEN（1） - 这仍然会触发加载，而cueChange事件仍会触发 - 但不会将提示绘制到屏幕上。在Captionator中，我根本不会将元数据轨迹绘制到屏幕上，但是开发中的（错误的）WebKit API将会出现。

video.textTracks[0].mode = 1; // HIDDEN

然后你需要监听提示加载和可用的时间：

video.textTracks[0].onload = function() { /* Your Code Here... */ }

或者当出现问题时：

video.textTracks[0].onerror = function() { /* Whoah, something went wrong... */ }

加载内容后，您可以访问TextTrack.cues数组（技术上是TextTrackCueList。）在加载之前，TextTrack.cues属性为null }。

var myCueText = video.textTracks[0].cues[0].text;

请注意，Captionator会解析每个提示的 cue text ，除非赛道类型为metadata - 因此请确保指定正确的赛道类型。你最终可能会得到Captionator认为被“抛弃”的数据或标签。您也可以通过将processCueHTML选项设置为false来关闭常规提示。

考虑到这一点，以下是我重写代码的方法：

<div>
    <p id="metadataText">Metadata text should appear here</p>
    <input type='button' onclick='changeText()' value='Click here to display the metadata text' id="changetext" disabled />
</div>

<video controls autobuffer id="videoTest" width="512" height="288">
    <!-- Your video sources etc... -->

    <!-- The metadata track -->
    <track label="Metadata Track" kind="metadata" src="metadata.vtt" type="text/webvtt" srclang="en" />
</video>

<!-- Include Captionator -->
<script type="text/javascript" src="captionator.js"></script>
<script type="text/javascript">
    document.addEventListener("readystatechange",function(event) {
        if (document.readyState === "complete") {
            captionator.captionify();

            document.querySelectorAll("#changetext")[0].removeAttribute("disabled");
        }
    },false);

    function changeText() {
        // Get the metadataText paragraph
        var textOutput = document.querySelectorAll("#metadataText")[0];

        // Get the metadata text track
        var metadataTrack = document.querySelectorAll("video")[0].textTracks[0];

        if (metadataTrack.readyState === captionator.TextTrack.LOADED) {
            // The cue is already ready to be displayed!
            textOutput.innerHTML = metadataTrack.cues[0].text;

        } else {
            // We check to see whether we haven't already assigned the mode.
            if (metadataTrack.mode !== captionator.TextTrack.SHOWING) {
                textOutput.innerHTML = "Caption loading...";

                // The file isn't loaded yet. Load it in!
                metadataTrack.mode = captionator.TextTrack.SHOWING; // You can use captionator.TextTrack.HIDDEN too.

                metadataTrack.onload = function() {
                    textOutput.innerHTML = metadataTrack.cues[0].text;
                }

                metadataTrack.onerror = function() {
                    textOutput.innerHTML = "Error loading caption!";
                }
            }
        }
    }

</script>

在这里，我们正在禁用该按钮，防止用户在连接速度慢（或者反应非常快的人）！在Captionator或元数据轨道准备就绪之前击中它，并听取加载事件 - 此时我们重新启用按钮，并可以正常检索提示文本。

Answer 2

您可能需要通过Ajax加载元数据VTT文件并自行解析和显示。

我查看了example中的HTML5 Doctors' article on video subtitling。他们正在使用Playr，所以我检查了它的源代码，他们肯定是异步请求VTT文件并在加载后解析内容。

我能够加载VTT文件的内容并使用以下代码将其转储到指定的元素中：

function changeText() {
    var track = document.getElementById("videoTest").querySelector("track");
    var req_track = new XMLHttpRequest();
    req_track.open('GET', track.getAttribute("src"));
    req_track.onreadystatechange = function(){
        if(req_track.readyState == 4 && (req_track.status == 200 || req_track.status == 0)){
            if(req_track.responseText != ''){
              document.getElementById("metadataText").innerHTML = req_track.responseText;
            }
        }
    }
    req_track.send(null);
}

我对Captionator并不熟悉，但看起来它有一些将VTT文件解析为某种数据结构的功能，即使它不一定支持metadata轨道类型。也许您可以结合使用此代码和Captionator现有的VTT解析器？

使用Captionator </video>从HTML5 <video>的<track />中读取元数据

2 个答案: