Правильный способ доступа к метке - никаких проблем нет (хотя в Captionator 0.6 будет изменено свойство .tracks на свойство .textTracks, чтобы оно больше соответствовало спецификации. Если вы может нести случайную ошибку, я бы порекомендовал использовать 0,6 для более строгого соответствия стандартам - я написал следующий код для использования .textTracks - замените .tracks, если вы хотите продолжать использовать стабильную ветвь.)
Проблема связана с загрузкой самих текстовых дорожек. На данный момент вы на самом деле не говорите Captionator загрузить трек . Поскольку это происходит асинхронно, и по запросу существует неизбежная задержка, когда их содержимое недоступно, вам нужно будет написать свой код так, чтобы он соответствовал времени загрузки и потенциальной ошибке загрузки.
Вы также не ожидаете загрузки самого Captionator - потенциально пользователь может неосознанно нажать кнопку до того, как это произошло, что вызовет неприятную ошибку JavaScript. Это не будет такой проблемой при тестировании на вашем локальном компьютере, но как только вы развернетесь в Интернете, вы увидите все виды условий гонки и другие неприятности. Попробуйте отключить кнопку до тех пор, пока не будут загружены данные страницы и подписи.
Я пытался сделать API-интерфейс Captionator максимально приближенным к реальному JS-API, который очень скоро появится в браузерах - поэтому в будущем это будет таким же образом, как вы будете взаимодействовать с собственными функциональными возможностями браузера. Как только функциональность станет доступна изначально, Captionator прекратит работу, и ваш код должен (при условии, что они не изменят API снова!) Просто работать с собственным API.
Прежде всего, вам нужно запросить, чтобы Captionator загрузил контент. Это сделано, установив «режим отображения» трека на SHOWING или 2.
var video = document.getElementByID("myVideo");
video.textTracks[0].mode = 2; // SHOWING
В качестве альтернативы, вы можете присвоить статус дорожки HIDDEN (1) - что все еще вызывает загрузку, и события cueChange будут по-прежнему срабатывать - но не будут отображать подсказки на экране. В Captionator я вообще не рисую дорожки метаданных на экране, но (глючный) API WebKit в разработке.
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 анализирует текст реплики каждой реплики, , за исключением случаев, когда тип дорожки равен 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 или дорожка метаданных будут готовы, и прослушивать событие загрузки - в какой момент мы снова включаем кнопку и можем получить текст подсказки в обычном режиме.