关于如何创建和显示 youtube 注释的技术解释？答案

【问题标题】：Technical explanation of how creating and displaying youtube annotations works?关于如何创建和显示 youtube 注释的技术解释？
【发布时间】：2011-11-14 22:59:17
【问题描述】：

我将很快开始从事一个涉及在视频中使用实时注释的学校项目。我真的很喜欢 youtube 的注释系统的工作方式，并且很想知道他们是如何创建它的。更具体地说，弄清楚如何重现其功能的主要组件。

如果您扩展要点，此链接将涵盖注释的高级功能。 http://www.google.com/support/youtube/bin/answer.py?answer=92710

谁能提供关于这个创建和显示注释的系统如何工作的技术解释？（例如，数据库存储注释的开始时间、注释的结束时间、注释的文本块，以及注释的唯一数字标识符。当视频到达注释的开始时间时，它会一直显示到结束时间。）

更具体地说，有谁知道创建这个系统使用了哪些工具？是使用 flex 还是纯粹在诸如 flash 专业之类的东西中完成？

我发现很难阅读有关注释的任何技术细节。 youtube actionscript 3.0 api 文档没有提到注释

http://code.google.com/apis/youtube/flash_api_reference.html

非常感谢

【问题讨论】：

标签： flash apache-flex youtube annotations flex3

【解决方案1】：

首先，使用什么开发环境并不重要，但我建议在 FlashBuilder/Flex 中进行任何类型的高级 Flash 开发。

其次，YouTube api 是供第三方开发者访问 YouTube 平台功能的，您不会发现任何有关 YouTube 产品开发过程的特殊隐藏信息。

不管怎样，让我们看看注解是如何工作的。

它们需要由最终用户创建，因此它们需要一种宽容、易于使用的创建/编辑方法。
需要在每个视频被请求时快速提供它们，因此包含注释元数据的结构化文本文件是最合适的（XML 可能是由于 Flash E4X 技术或 JSON，因为也足够用于 Flash 的 JSON 库。）这些结构化文本文件可能存储在数据库中（可能是 NoSQL 类型的解决方案。）

至于元数据的格式，您需要一个开/关提示、坐标、样式、消息文本，也许还需要一个点击链接。使用 YouTube 视频注释器并记下您在添加/编辑注释时可以执行的所有操作，然后您将获得元数据需要存储的所有内容的列表。

Flash 视频允许使用嵌入在 FLV 中的提示点，因此这些提示点可用于链接到自定义元数据并在坐标/样式/文本中针对特定提示显示适当的注释。同样，当一个提示点对应于注释的提示时，我们可以将其从显示中移除。

这是一个相当基本的概述，请对您希望我扩展的内容发表评论，而且我并未涵盖 YouTube 实现其不同类型注释的所有可能方式，例如对话气泡；忽略已关闭注释的提示关闭；聚光灯等，但是当您构建一个简单的注释系统时，您可以在您的第一个版本中忽略这些额外的细节。

参考资料：

其他参考：

Flash SoundChannel docs

【讨论】：

@LedZeppelin - 请务必注意，在 Flash 中播放 MP3 并不像 FLV 播放那样支持 native 提示点，因此您需要实现作为自定义功能。您可以及时查看播放头的位置，因此您需要为每个 EnterFrame 事件设置一个侦听器，然后检查播放头的位置，查找注释，看看是否有匹配的提示点，如果是...显示（或拆除，如果它是“关闭”的提示点。）
@LedZeppelin - 就入门而言，看看你是否可以通过简单的SoundChannel 播放 mp3 并设置单个提示点，看看你是否可以在播放头时报告它击中它。只需将提示点作为Number 变量，SoundChannel 的position 属性也是一个数字，因此您只需要看到它们匹配即可。完成此操作后，推断多个注释点应该相当简单。
@LedZeppelin - 关于创建用户界面以添加注释/提示点，看看 soundcloud.com 如何让人们将 cmets 添加到轨道。它们将注释的位置近似于波形的视觉表示，并在一两秒后关闭注释，而不是明确的“关闭”提示点。这完全取决于您选择如何设计和实现用户界面，但这是一个不错的示例。
@LedZepplin - 查看mattshaw.org/news/as3-mp3-player，尤其是updateProgress() 和play() 方法，注意EVENT_TIME_CHANGE 由setInterval(updateProgress, 30); 管理（即每30 毫秒更新一次。）这是使用ENTERFRAME 的替代策略，值得注意，它通常会提供更好的结果（因为更新时间会更紧）。这里的大部分代码也对你有用。
这是一个快速的（可能很脏，我没有编译它。）使用带有一组预定义提示/注释的 Mp3Player 类的示例。 gist.github.com/1210454