HTML5视频中的动态文本

Question

我想动态地向HTML5视频添加文字。目前，这是通过Flash实现的，并传递Flash在某些时间间隔期望的变量。 HTML5中的等价物（如果有的话）是什么？有没有人有任何例子？

Answer 1

你可以试试这样的......

http://dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/

Answer 2

这是另一种方法：http://blog.app-solut.com/2011/03/display-additional-overlay-elements-on-top-of-an-html5-video-element-with-javascript/

Answer 3

您可以将帧渲染到画布，然后从那里添加文本。这是一个例子 http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/

http://www.craftymind.com/factory/html5video/CanvasVideo.html

http://www.craftymind.com/factory/html5video/CanvasVideo3D.html

Answer 4

这相当于文本轨道api或轨道元素。这给了你很多东西。脚本的cuechange事件（kind = metadata），使用文本轨道api直接将字幕渲染到视频中（kind = subtitles）。

如上所述，HTML5为您提供了DOMScripting和Markup-API来实现这一目标。目前只有Safari支持此功能。您可以找到example using a polyfill here。