从 <track> 读取元数据一个 HTML5 <video>使用字幕 [英] Reading metadata from the <track> of an HTML5 <video> using Captionator
问题描述
我无法从 WebVTT 文件中读取元数据的工作示例,该文件由 中的
元素指定一个 HTML5 页面.需要明确的是,我不是在谈论从视频文件本身中读取元数据(例如,就像使用 MPEG 传输流一样).我要说的是用于为视频添加字幕的
元素.
的属性之一是
kind
,它可以指定为以下任意值:
- 字幕
- 说明
- 字幕
- 导航
- 章节
- 元数据
我正在尝试使用 metadata 类型来访问存储在相应 WebVTT 文件中的文本,我打算使用 JavaScript 对其进行操作.我知道这是可能的,因为它是 Silvia Pfeiffer 提到的以及 Captionator 的制作者,这是 JavaScript polyfill我用来实现解释 <track>
标签的功能.但是,我无法让它工作.
我的代码基于 Captionator 文档的字幕示例.我添加了一个按钮来检索元数据并在单击该按钮时显示它.不幸的是,它一直显示未定义"而不是元数据.任何想法我可能做错了什么?或者,有谁知道我可以查看的工作示例在哪里?我在任何地方都找不到.
如果你想看看我的代码,我已经把它包含在下面:
<头><title>HTML5 视频隐藏字幕示例</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" media="screen" href="js/Captionator-v0.5-12/css/captions.css"/>头部><身体><h1>HTML5 视频隐藏式字幕示例</h1><div><p id="metadataText">元数据文本应该出现在这里</p><input type='button' onclick='changeText()' value='点击这里显示元数据文本'/>
<视频控制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 label="Metadata Track" kind="metadata" src="http://localhost:8080/Videos/Timed_Text_Tracks/testVideo_metadata.vtt" type="text/webvtt" srclang="en"/></视频><!-- 包括字幕--><script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator.js"></script><!-- 示例用法--><script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator-example-api.js"></script><script type="text/javascript">window.addEventListener("加载",function() {captionator.captionify(空,空,{调试模式:!!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));},错误的);函数更改文本(){document.getElementById('metadataText').innerHTML = testVar;var cueText = document.getElementById("video").tracks[0].activeCues[0].getCueAsSource();document.getElementById('metadataText').innerHTML = cueText;}