javascript - Ted Talk 视频的 HTML5 字幕

标签 javascript jquery html css

我注意到在 ted 演讲中,当嵌入视频 flash 时,如果您选择有字幕,就会有字幕。但是,html5版本没有。我想知道是否有任何方法可以使它正常工作。现在我在灯箱中打开了 iframe。

我能想到的一个 hacky 修复是有一个 float div,它根据 JSON 字幕文件更改文本(例如:http://www.ted.com/talks/subtitles/id/70/lang/pt)但是...如果有更好的解决方案,我很想知道。但是,如果有人知道如何实现 hacky 修复,那也很棒。

谢谢 :)

最佳答案

Here is an article描述如何开始使用 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 文件,并更改文件扩展名。您需要将其托管在网络服务器上,它不会在本地运行(例如 src=file://)

关于javascript - Ted Talk 视频的 HTML5 字幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17755789/

相关文章:

javascript - 清除/重置按钮并在下拉列表中显示第一个/占位符

单击 jQuery 显示 div 但它闪烁并消失

javascript - Owl Carousel ,到达第一个/最后一个元素后禁用导航

html - AngularJS 中的 md-content 滚动问题

jquery - 如何使用 jQuery 在时间后更改文本?

javascript - 当 Canvas 不可见时停止工作

javascript - 如何将 Javascript ID 值传递到 window.location.href

javascript - 在文本框中,当我按 ENTER 时如何提交表单以及当我按 shift+ENTER 时如何插入新行

javascript - knockout 和 jQuery 验证远程 : not getting latest value

php - 使用 AJAX、PHP 和 MySQL 链式填充 HTML 选择框