我是新手,在HTML 5中使用音频标签,并希望建立一个播放器.我想在轨道标签中使用VTT文件进行测试,以查看隐藏式字幕的工作原理.
这是我的代码:
<audio controls>
<source src="myaudio.mp3" type="audio/mpeg">
<track kink="caption" src="myaudio.vtt" srclang="en" label="English">
</audio>
根据我所读到的,跟踪应该适用于音频和视频,这从可访问性的角度来看是有意义的.什么是没有意义的是我试图加载它的错误:
"Text track from origin 'file://' has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute. Origin 'null' is therefore not allowed access."
在查看crossorigin属性时,我收到很多关于CORS和"anonymous"和"user-certificate"的预期值的令人困惑的文章.尝试要么导致类似的错误.
关于为什么这不起作用的任何想法？
这是 WebVTT 的示例
WEBVTT
Kind: captions
Language: en
Style:
::cue(c.colorCCCCCC) { color: rgb(204,204,204);
}
::cue(c.colorE5E5E5) { color: rgb(229,229,229);
}
##
00:00:00.060 --> 00:00:03.080 align:start position:0%
<c.colorE5E5E5>okay<00:00:00.690><c> so</c><00:00:00.750><c> this</c><00:00:01.319><c> is</c><00:00:01.469><c> a</c></c><c.colorCCCCCC><00:00:01.500><c> newsflash</c><00:00:02.040><c> page</c><00:00:02.460><c> for</c></c>
00:00:03.080 --> 00:00:03.090 align:start position:0%
<c.colorE5E5E5>okay so this is a</c><c.colorCCCCCC> newsflash page for
</c>
00:00:03.090 --> 00:00:08.360 align:start position:0%
<c.colorE5E5E5>okay so this is a</c><c.colorCCCCCC> newsflash page for</c>
<c.colorE5E5E5>Meraki<00:00:03.659><c> printing</c><00:00:05.120><c> so</c><00:00:06.529><c> all</c><00:00:07.529><c> we</c><00:00:08.040><c> need</c><00:00:08.130><c> to</c><00:00:08.189><c> do</c></c>
00:00:08.360 --> 00:00:08.370 align:start position:0%
<c.colorE5E5E5>Meraki printing so all we need to …我按照指令字幕与GPAC一起将Webvtt文件导入mp4文件作为轨道
,当我使用GPAC的Osmo4播放器时,我检查了字幕是否正确显示.
现在,我想通过HTML5视频标签播放带有字幕的视频,但似乎HTML媒体轨道元素需要src属性来指定webvtt文件的位置.
有没有办法播放嵌入式字幕？
我试图使用webvtt元素显示音频录制的字幕,如下所示:
<audio controls="controls">
<source src="TheBrigands.mp3" />
<source src="TheBrigands.ogg" />
<track default="" kind="subtitles" srclang="en" label="English text" src="TheBrigands.vtt" />
</audio>
<div id="display">
It was a cold and stormy night,
</div>
使用此脚本填充显示div:
<script>
function main() {
var recording = document.querySelector("audio");
var track = recording.textTracks[0];
var display = document.getElementById("display");
track.mode = "hidden";
track.oncuechange = function () {
var cue = this.activeCues[0];
display.innerHTML = cue.text;
}
}
window.onload = main;
</script>
然而,当我在firefox中检查轨道时,虽然它有一个提示对象,但它是空的:
document.querySelector('track').track.cues
TextTrackCueList { length: 0 }
我查了一下,我在服务器中正确配置了mime-type.
我错过了什么导致它无法加载？
我终于得出结论,google-chrome不支持.srt,因为WEBVTT是HTML5标准.
现在我想知道这个决定背后的原因是什么.
似乎google-chrome也可能支持.srt,因为:
在WEBVTT中有什么更好的东西使.srt过时了吗？
我的需要
html5 video 元素加载保存在不同域中的视频和 vtt 文件。
问题
vtt 未加载和错误 Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.
我的调查
我知道需要使用 CORS，以便 vtt 可以成功加载到 html5 中。
我已经在服务器端为来自任何域的请求启用了 CORS。
一些文章说添加crossorigin或添加crossorigin="anonymous"到` 元素可以完成这项工作，但它不起作用。视频根本没有加载或出现不同的错误
我把我的代码放在下面
<body>
<div class="container">
<video id="myvideo" controls preload="auto" width="640" height="264" autoplay>
<source src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.mp4 type="video/mp4"></source>
<track kind="captions" label="English" srclang="en" src=http://video.dublearn.net/-KqIgE-3roMSBbiHUmLI/video.vtt default>
</video>
</body>试图找到一个从Amazon AWS Transcribe服务转换我的json响应的包,没有运气.
您可以在Fiddle的JavaScript部分中看到一个示例JSON.
我不想采取天真的方法,只是像10个单词一样"捆绑",因为这将以奇怪的方式隔离字幕.
我甚至会接受使用Google语音服务或语音信息的程序化方式.它们都返回一个按字母细分的json文件.
有人曾经使用过吗？
谢谢!
我正在使用 youtube-dl 从 youtube 下载 WebVTT 文件。
典型的文件如下所示：
WEBVTT
Kind: captions
Language: en
00:00:00.730 --> 00:00:05.200 align:start position:0%
[Applause]
00:00:05.200 --> 00:00:05.210 align:start position:0%
[Applause]
00:00:05.210 --> 00:00:11.860 align:start position:0%
[Applause]
hi<00:00:06.440><c> I'm</c><00:00:07.440><c> here</c><00:00:07.740><c> to</c><00:00:08.160><c> talk</c><00:00:08.429><c> to</c><00:00:09.019><c> share</c><00:00:10.019><c> an</c><00:00:10.469><c> idea</c><00:00:10.820><c> to</c>
00:00:11.860 --> 00:00:11.870 align:start position:0%
hi I'm here to talk to share an idea to
00:00:11.870 --> 00:00:15.890 align:start position:0%
hi I'm here to talk to share an idea to
communicate<00:00:12.920><c> but</c><00:00:13.920><c> what</c><00:00:14.790><c> is</c><00:00:14.940><c> communication</c>
00:00:15.890 --> 00:00:15.900 align:start …有没有可以转换格式的应用.vtt程序.srt？我尝试了 subtitleeditor，它不支持.vtt. 如果有人知道任何可以用来执行相同操作的特定应用程序，请分享。
我正在使用以下命令从视频文件中提取字幕，并将其另存为vtt.
ffmpeg -i video.mkv -map 0:s:0 subs.vtt 2>&1
它正在工作并输出字幕文件。问题在于 RTL（从右到左）语言（希伯来语、阿拉伯语等）。标点符号放错了位置。
为了您的方便，我将向您展示正在发生的事情的英文示例：
输入文本：
Is he alive?
-I don't know.
输出文本：
?Is he alive
.I don't know-
如果你想要希伯来语原文，它是：
输入文本：
??? ???
-??? ?? ????.
输出文本：
???? ??
.??? ?? ????-
如您所见，末尾的标点符号指向开头，反之亦然。我怎样才能避免这种行为？