Ted Talk视频的HTML5字幕

HTML5 subtitles on Ted Talk Videos

本文关键字：HTML5 字幕视频 Talk Ted 更新时间：2023-09-26

我注意到，在ted演讲中，当嵌入视频闪光灯时，如果你选择有字幕，就会有字幕。然而，html5版本没有任何。我想知道是否有办法让它发挥作用。现在我在一个灯箱里打开了iframe。

我能想到的一个破解方法是使用一个浮动div来更改基于JSON字幕文件的文本（例如：http://www.ted.com/talks/subtitles/id/70/lang/pt)但是。。。如果有更好的解决方案，我很想知道。但如果有人知道如何实现这个破解方案，那也太好了。

感谢：）

这里有一篇文章描述了如何开始使用Track元素，您可以使用它添加字幕或字幕。

编辑：构建一个包含HTML5视频和跟踪标记的单独文件，然后将其引用为iframe源。

<html>
<head>
</head>
<body>

<iframe width="560" height="315" frameborder="0" src="YOUR_HTML5_VIDEO_PLUS_TRACK"></iframe>
</body>
</html>

然后，你的.vtt文件看起来像：

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

您可以在任何文本编辑器中创建此.vtt文件，并更改文件扩展名。您需要将其托管在web服务器上，它将无法在本地工作（例如src=file://）