Чтение метаданных из HTML5 с помощью Captionator

Способ доступа к cue правильный - никаких проблем нет (хотя в Captionator 0.6 будет изменено свойство .tracks на свойство .textTracks, чтобы быть более соответствующим спецификации. Если вы можете переносить случайные ошибки, я бы рекомендовал использовать 0.6 для большего соответствия стандартам - я написал ниже код для использования .textTracks - замените .tracks, Если вы хотите продолжать использовать стабильную ветвь.)

Проблема связана с загрузкой текстовых дорожек самих себя. На данный момент Вы на самом деле не говорите Captionator загрузить трек. Поскольку это происходит асинхронно, и по запросу возникает неизбежная задержка, когда их содержимое недоступно, вам нужно будет написать свой код таким образом, чтобы он соответствовал времени загрузки и потенциальной ошибке загрузки.

Вы также не ждете загрузки самого Captionator-потенциально пользователь может бессознательно нажать кнопку, прежде чем это произойдет-запуск неприятного ошибка JavaScript. Это не будет такой проблемой при тестировании на локальном компьютере, но как только вы развернетесь в интернете, вы увидите всевозможные условия гонки и другие неприятности. Рассмотрите возможность отключения кнопки до тех пор, пока не загрузятся данные о странице и заголовке.

---

Я постарался сделать API Captionator как можно ближе к фактическому API JS, который очень скоро появится в браузерах - так что в будущем это будет таким же образом, как вы будете взаимодействовать с собственным браузером функциональность. Как только функциональность будет доступна изначально, Captionator откланяется, и ваш код должен (при условии, что они не изменят API снова!) просто работайте с собственным API.

Прежде всего, вам нужно на самом деле запросить, чтобы Captionator загрузил содержимое. Это делается с помощью настройки "режима отображения" дорожки на SHOWING или 2.

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

Кроме того, вы можете присвоить статус трека HIDDEN (1) - который все еще вызывает a загружайте, и события 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 (Ну, технически a TextTrackCueList.) До того, как произойдет загрузка, свойство TextTrack.cues будет null.

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

Имейте в виду, что Captionator анализирует текст cue каждого cue, , за исключением случаев, когда вид дорожки 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 или дорожка метаданных, и прослушивания события загрузки - в этот момент мы снова включаем кнопку и можем получить текст подсказки как обычно.