定义API
对于我们的小框架，首先定义了API是有道理的。换句话说，我们需要弄清楚如何会有人使用这个库，然后写JavaScript来实现API。
视频和动画库可以工作在许多方面，但主要的接口难题是要弄清楚如何耦合的动画视频。应该如何开发人员指定应出现在哪些元素，并在它们应该在视频开始的时候它的动画？
一种选择是倒吸了一口以JSON或XML数据。与此相反的解决方案是没有单独的数据文件，并把所有的配置成纯JavaScript函数调用。两者都是优良的，但有一条中间道路。
通常情况下，CSS动画是在样式表中定义。理想情况下，这就是它应该为Charlie.js定义，而不是在一个JSON文件。这很有道理，而且做这样具有优势。当动画是在样式表中，而不是一个JavaScript或者JSON文件，你可以对其进行测试，而无需加载整个视频和动画库。
该动画被耦合到一个元素与数据属性。数据属性定义动画的名字，还可以指定开始时间。
比方说，你有一个CSS动画命名褪色的拨号下来的不透明度和另一个名为一扔移动元素在页面。而你要在页面上一个div到三秒同时使用动画到视频。您的标记看起来像这样：
<div class="charlie" data-animations="fade, fling" data-times="3, 3">
...
</div>Charlie.js会看到这一点，并知道跑了褪色和一扔动画一旦视频打三秒钟。
的褪色和一扔动画在链接到文档中的样式表中定义。
这里是什么淡入淡出的动画可能看起来像（浏览器前缀这里排除，但是需要针对Chrome和Safari）：
.fade {
animation-name: fade;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
@keyframes fade {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
褪色类是什么Charlie.js适用于动画元素，这将触发淡出动画。
驱动视频：HTML5与Flash和Silverlight的比较
有了API出来的方式，下一个决定是如何举办的视频。主办单位将确定什么样的容器的视频被塞进，容器将决定什么是可能的视频。
视频嵌入Flash或Silverlight会限制你的设计方案，因此视频托管服务应该理想地支持HTML5的视频标签。该视频标签更容易和样式在页面上移动。您可以应用CSS滤镜和转换，甚至使用CSS动画影片本身。此外，标准的媒体事件是强大的，并提供充足的场所和方式来勾你的代码插入视频。在这个大的缺点视频标签兼容性。它不会在Internet Explorer 8中正常工作。
应该Charlie.js什么样的视频托管服务的支持？构建一个支持多个主机选择一个库是可行的。例如，Popcorn.js（用于同步的内容与视频的真棒库）支持多种主机选项和API。但为了保持简单，我们的小图书馆将只支持一个香草视频标签。在任何一个iframe或Flash容器将不被支持。
这是很好的Charlie.js，但是如果你被卡住支持旧的浏览器，并必须处理塞在一个iframe的视频？大多数视频托管公司有体面的API。最起码，你应该能够使用这些API来同步你的动画-你只是被卡住了嵌入式Flash对象的工作。的YouTube和Vimeo是最流行 的服务，并都提供了丰富的API支持。Wistia是另一个伟大的选择，但少为人知。
如果你想使用一个纯粹的视频标签，但不希望自己主持的视频，看看Vid.ly。一旦你上传你的视频，Vid.ly将编码它需要每一个格式，给你，你可以在你使用通用网址的视频标签，它会自动选择正确的视频类型根据用户代理。
<video id="video" src="http://vid.ly/4m4e2n?content=video" controls="" preload="none">
Your browser does not support the HTML5 video element.
</video>注意
JavaScript的大多数这些代码片段的使用下划线 ;东西一样_.forEach和_.toArray是效用函数从该库中。下划线鼓励编程的实用的风格，可能看起来很奇怪，如果你以前从来没有见过它，但投资在学习下划线一点时间可以为您节省大量的时间和代码行。这是值得一试。在这篇文章中，你会发现代码中的注释来告诉你发生了什么事情，它应该是很容易理解。
另外一个需要注意：这里的代码将在最现代的浏览器中运行，但没有尝试已取得使这个完全跨浏览器兼容。如果您的企业真正需要的CSS动画与视频进行同步，并在几乎所有的浏览器中运行，那么这个库将不会帮助你。但对我的生意，也许对你的，只有支持现代浏览器的罚款 。而即使有这样的限制，大量的材料在这里还是值得学习的。