Чтение метаданных из <track> HTML5 <video> с помощью Captionator
У меня возникают проблемы при получении рабочего примера, который читает метаданные из файла WebVTT, который был указан<track> элемент<video> на странице HTML5. Чтобы было ясно, я не говорю о считывании метаданных из самого видеофайла (как, например, в случае с транспортным потоком MPEG). То, о чем я говорю, это<track> элемент, который используется для подписи видео. Одним из атрибутов<track> являетсяkind, который может быть указан как любое из следующих значений:
Я пытаюсь использоватьметаданные тип для доступа к тексту, хранящемуся в соответствующем файле WebVTT, которым я намерен манипулировать с помощью JavaScript. Я знаю, что это возможно, так как этоупоминается Сильвия Пфайффер также как исоздатель Captionator, который является полифиллом JavaScript, который я использую для реализации функциональности интерпретации<track> теги. Однако я просто не могу заставить его работать.
Мой код основан на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 . . .