Ste*_*eph 9 javascript video html5 accessibility html5-video
我无法获得一个从WebVTT文件读取元数据的工作示例,该文件由HTML5页面中的<track>元素指定<video>.为了清楚起见,我不是在谈论从视频文件本身读取元数据(例如,与MPEG传输流一样).我所说的<track>是用于标题视频的元素.a的一个属性<track>是kind,可以指定为以下任何值:
我正在尝试使用元数据类型来访问存储在相应WebVTT文件中的文本,我打算使用JavaScript进行操作.我知道这是可能的,正如Silvia Pfeiffer以及Captionator的制造者所提到的,这是我用来实现解释<track>标签功能的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 . . .
Chr*_*her 11
你访问提示的方式是正确的 - 那里没有问题(虽然Captionator 0.6会从.tracks属性更改为.textTracks属性更符合规范.如果你能承受偶尔的错误,我建议使用0.6因为它符合更高标准 - 我编写了以下代码.textTracks- .tracks如果你想继续使用稳定分支,请替换.)
该问题涉及文本轨道本身的加载.目前,你实际上并没有告诉Captionator加载音轨.因为这是异步发生的,并且在请求时,存在不可避免的延迟,其内容不可用,您需要以适应加载时间和潜在负载错误的方式编写代码.
你也没有等待Captionator本身加载 - 可能用户可能会在发生这种情况之前不知不觉地点击按钮 - 触发了一个令人讨厌的JavaScript错误.在本地盒子上测试时,这不会是一个问题,但是一旦你部署到互联网上,你就会看到各种各样的竞争条件和其他恶意.在页面和标题数据都加载之前,请考虑禁用该按钮.
我已经尝试使Captionator API尽可能接近实际的JS API,它将很快登陆浏览器 - 所以将来这将与您与本机浏览器功能的交互方式相同.只要功能本身可用,Captionator就会退出,并且您的代码应该(假设它们不会再次更改API!)只需使用本机API.
首先,您需要实际请求Captionator加载内容.这是我将轨道的"显示模式"设置为SHOWING,或2.
var video = document.getElementByID("myVideo");
video.textTracks[0].mode = 2; // SHOWING
或者,您可以将轨道的状态分配给HIDDEN(1) - 仍然会触发加载,并且cueChange事件仍将触发 - 但不会将提示绘制到屏幕.在Captionator中,我根本不会将元数据轨道绘制到屏幕上,但是开发中的(buggy)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会解析每个提示的提示文本,除非轨道类型为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或元数据轨道准备就绪之前点击它,并听取加载事件 - 此时我们重新启动启用按钮,可以正常检索提示文本.