我希望能够显示带有重叠注解的普通YouTube视频，该注解由每帧的彩色矩形组成。唯一的要求是，这应该以编程方式完成。

YouTube现在有注释，但是要求我们使用它们的前端手动创建它们。我希望能够生成它们。最好的方法是什么？

一些想法：

Build your own Flash player (ew?)
  Somehow draw over the YouTube Flash player. Will this work?
  Reverse engineer & hiHyman YouTube's annotation system. Either messing with the local files or redirecting its attempt to download
  the annotations. (using Greasemonkey? Firefox plugin?)

不重要的想法：

download the video

解决方案：

播放器本身具有Javascript API，如果我们选择制作自己的" annotation-thingamajig"，则可能对同步视频很有用。

YouTube提供了一个ActionScript API。

使用此功能，我们可以使用视频的API将视频加载到Flash中，然后让Flash应用在视频上方的图层上创建注释。

或者，或者，如果我们想避免在Flash中创建内容，可以使用YouTube的JavaScript API，在网页上的YouTube播放器上绘制HTML DIV。只要记住，当我们将播放器嵌入时，在参数列表中就会有" WMODE =" transparent"`。

因此，使用YouTube中的示例：

<script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer", wmode: "transparent" };
    swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID&enablejsapi=1&playerapiid=ytplayer", 
                       "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

然后，我们应该可以使用CSS / DHTML在YouTube电影上绘制注释。

乔·伯科维茨(Joe Berkovitz)已编写了一个名为" ReviewTube"的示例应用程序，该应用程序"允许用户为任何YouTube视频创建基于时间的字幕(隐藏式字幕)。这些字幕可以公开访问，并且网站的访问者可以浏览带有字幕的视频集。把它当作YouTube的字幕涂鸦墙！"

该应用程序是用于演示用于构建Flex应用程序的MVCS框架/方法的示例。

http://www.joeberkovitz.com/blog/reviewtube/

不知道这是否对彩色矩形有帮助，但这是一个不错的起点。