Javascript 从<；轨道>；HTML5的应用<；视频>；使用字幕
我很难获得一个从WebVTT文件读取元数据的工作示例，该文件是由HTML5页面中Javascript 从<；轨道>；HTML5的应用<；视频>；使用字幕,javascript,html,video,accessibility,html5-video,Javascript,Html,Video,Accessibility,Html5 Video,我很难获得一个从WebVTT文件读取元数据的工作示例，该文件是由HTML5页面中的元素指定的。清楚地说，我并不是说从视频文件本身读取元数据（例如，与MPEG传输流一样）。我说的是用于视频字幕的元素。的属性之一是种类，可以指定为以下任意值： 副标题 描述 标题 航行 章节 元数据 我试图使用元数据类型访问存储在相应WebVTT文件中的文本，我打算使用JavaScript对其进行操作。我知道这是可能的，这也是我用来实现解释标记的功能的JavaScript polyfill。然而，我就是不能让它工
种类- 副标题
- 描述
- 标题
- 航行
- 章节
- 元数据
<!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>
您可能需要通过Ajax加载元数据VTT文件，并自己解析和显示它 我从楼梯上看了看房子。他们正在使用，所以我检查了它的源代码，他们肯定在异步请求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文件解析为某种数据结构的功能，即使它不一定支持
元数据.tracks.textTracks.textTracks。如果要继续使用稳定分支，请跟踪。）
这个问题与文本曲目本身的加载有关。目前，您实际上并没有告诉Captionator加载曲目。因为这是异步发生的，并且在请求时，在其内容不可用的情况下会不可避免地出现延迟，所以您需要以一种适应加载时间和pot的方式编写代码总负荷误差
你也不是在等待Captionator本身加载——用户可能会在这之前不知不觉地点击按钮——触发一个严重的JavaScript错误。在本地机器上进行测试时，这不会是一个问题，但一旦你部署到internet上，你就会看到各种各样的竞争条件和其他问题。Con侧边禁用按钮，直到页面和标题数据都加载完毕
我已经尝试使Captionator API尽可能接近即将在浏览器中登陆的实际JS API-因此，在将来，这将与您与本机浏览器功能交互的方式相同。一旦本机功能可用，Captionator将退出，并且您的代码应该（假设他们不再更改API！）只需使用本机API即可
首先，您需要实际请求字幕员加载内容。这是我将曲目的“显示模式”设置为显示
，或2
var video = document.getElementByID("myVideo");
video.textTracks[0].mode = 2; // SHOWING
或者，您可以将曲目的状态指定给隐藏的（1
）-这仍然会触发加载，并且提示更改事件仍然会触发-但不会将提示绘制到屏幕上。在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认为“无效”的数据或标记。您也可以通过设置程序关闭常规线索的此检查essCueHTML
选项设置为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>
元数据文本应出现在此处
document.addEventListener（“readystatechange”），函数（事件）{
如果（document.readyState==“完成”）{
captionator.captionify（）；
document.querySelectorAll（#changetext”）[0]。removeAttribute（“已禁用”）；
}
}，假）；
函数changeText（）{
//获取metadataText段落
var textOutput=document.querySelectorAll（“#metadataText”）[0]；
//获取元数据文本跟踪
var metadataTrack=document.querySelectorAll（“视频”）[0].textTracks[0]；
if（metadataTrack.readyState===captionator.TextTrack.LOADED）{
//线索是阿尔雷
<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>