从读取元数据HTML5<视频>的使用字幕器

发布于 2025-01-08 05:05:59 字数 3589 浏览 1 评论 0原文

我无法获取从 WebVTT 文件读取元数据的工作示例，该文件由 HTML5 页面中的元素指定。需要明确的是，我并不是在谈论从视频文件本身中读取元数据（例如，就像使用 MPEG 传输流一样）。我所说的是用于为视频添加字幕的元素。的属性之一是 kind，它可以指定为以下任意值：

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

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

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

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

<!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>

我的 WebVTT 文件如下所示：

WEBVTT

0
00:00.000 --> 00:04.000
Testing 1 2 3 . . .

原文

I am having trouble getting a working example that reads metadata from a WebVTT file, which was specified by the <track> element of a <video> in an HTML5 page. To be clear, I am not talking about reading the metadata out of the video file itself (as you would with an MPEG Transport Stream, for instance). What I'm talking about is the <track> element that is used for captioning videos. One of the attributes of a <track> is kind, which can be specified as any of the following values:

Subtitles
Descriptions
Captions
Navigation
Chapters
Metadata

I am trying to use the metadata type to access text stored in the corresponding WebVTT file, which I intend to manipulate using JavaScript. I know this is possible, as it is mentioned by Silvia Pfeiffer as well as by the maker of Captionator, which is the JavaScript polyfill that I am using to implement the functionality of interpreting the <track> tags. However, I just can't get it to work.

My code is based on the Captionator documentation's captions example. I added a button to retrieve the metadata and display it when I click the button. Unfortunately it keeps displaying "undefined" instead of the metadata. Any ideas what I might be doing incorrectly? Alternatively, does anyone know where a working example is that I could take a look at? I can't find one anywhere.

If you care to take a look at my code, I've included it below:

<!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>

My WebVTT file looks like this:

WEBVTT

0
00:00.000 --> 00:04.000
Testing 1 2 3 . . .

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清眉祭 2025-01-15 05:05:59

您访问提示的方式是正确的 - 没有问题（尽管 Captionator 0.6 中将 .tracks 属性更改为 .textTracks 属性更符合规范。如果您可以忍受偶尔出现的错误，我建议使用 0.6，因为它具有更好的标准合规性 - 我编写了以下代码来使用 .textTracks - 替代.tracks 如果您想继续使用稳定分支。）

该问题与文本轨道本身的加载有关。目前，您实际上并没有告诉 Captionator 加载曲目。因为这是异步发生的，并且是根据请求发生的，所以在内容不可用的情况下不可避免地会出现延迟，因此您需要以适应加载时间和潜在加载错误的方式编写代码。

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

我尝试使 Captionator API 尽可能接近实际的 JS API，该 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 会解析每个提示的提示文本，轨道类型为元数据时除外 - 因此请确保您分配正确的轨道类型。您最终可能会得到 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 或元数据轨道准备好之前点击它，并监听加载事件 - 此时我们重新启用按钮，并且可以正常检索提示文本。

The way you're accessing the cue is correct - no problems there (although there will be a change in Captionator 0.6 from the .tracks property to the .textTracks property to be more in line with the specification. If you can bear the occasional bug I would recommend using 0.6 for its greater standards compliance - I've written the below code to use .textTracks - substitute for .tracks if you'd like to continue using the stable branch.)

The issue relates to the loading of the text tracks themselves. At the moment, you're not actually telling Captionator to load the track. Because this happens asynchronously, and on request, there is that inevitable delay where their content isn't available, you'll need to write your code in a way which accommodates for loading time and the potential load error.

You're also not waiting for Captionator itself to load - potentially a user could unknowingly click the button before this had occurred - triggering a nasty JavaScript error. This won't be such a problem when testing on your local box, but as soon as you deploy to the internet you'll be seeing all sorts of race conditions and other nasties. Consider disabling the button until both the page and the caption data have loaded.

I've tried to make the Captionator API as close as possible to the actual JS API which will be landing in browsers very soon - so in future this will be the same way you'll interact with the native browser functionality. As soon as the functionality is available natively, Captionator will bow out of the way, and your code should (assuming they don't change the API again!) just work with the native API.

First of all, you need to actually request that Captionator load the content. This is done my setting the 'display mode' of the track to SHOWING, or 2.

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

Alternately, you can assign the status of a track to HIDDEN (1) - which still triggers a load, and cueChange events will still fire - but won't paint cues to screen. In Captionator, I don't paint metadata tracks to screen at all, but the (buggy) WebKit API in development will.

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

Then you need to listen for when the cues are loaded and available:

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

Or when something goes wrong:

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

Once the content is loaded, you can access the TextTrack.cues array (well, technically a TextTrackCueList.) Before the load has occurred, the TextTrack.cues property will be null.

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

Be aware that Captionator parses the cue text of every cue, except when the track kind is metadata - so ensure you assign the correct track kind. You might end up with data or tags Captionator thinks are 'invalid' being thrown out. You can turn this check off for regular cues as well, with by setting the processCueHTML option to false.

With that in mind, here's how I'd rewrite your code:

<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>

Here, we're disabling the button, preventing users on slow connections (or just somebody with very quick reflexes!) from hitting it before either Captionator or the metadata track are ready, and listening to a load event - at which point we re-enable the button, and can retrieve the cue text as normal.

回复收藏 0 原文

[旋木] 2025-01-15 05:05:59

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

我查看了示例来自 HTML5 Doctors 关于视频字幕的文章。他们正在使用 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 文件解析为某种数据结构的功能，即使它不一定支持元数据轨道类型。也许您可以结合使用此代码和 Captionator 现有的 VTT 解析器？

You may need to load your metadata VTT file via Ajax and parse and display it yourself.

I looked at the example from the HTML5 Doctors' article on video subtitling. They're using Playr, so I checked out its source code, and they're definitely requesting the VTT file asynchronously and parsing the content once it's loaded.

I was able to load the contents of the VTT file and dump it into the specified element with the following code:

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);
}

I'm not familiar with Captionator, but it looks like it has some capabilities for parsing VTT files into some sort of data structure, even if it doesn't necessarily support the metadata track type. Maybe you can use a combination of this code and Captionator's existing VTT parser?

回复收藏 0 原文

~没有更多了~