费德里克是唯一的其他的孩子在块与专用ISDN线路，所以我给他打了电话。它花了六个小时的没完没了的等待（着疯狂的一阵阵的诅咒），但我刚刚看了60秒的原始的Macintosh波涛汹涌的商业电视在Firefox，我不得不告诉别人。它吹我的脑海。
在网上的视频已经改进了很多自从第一次紧张的低分辨率的商业我看着我的QUADRA 605回第七级。但是最重要的是，视频仍然是从Web分开，封锁iframes和Flash和瓶装在小窗口在页面的中心。他们错过了一个机会为Web设计者无处不在。
但你如何整合到一个应用程序或视频营销网页？它会是什么样子，你是如何实现它的？在这篇文章中，你会找到灵感，如何和一些技术好让你开始用现代的视频在网络上。
当视频离开笼子
视频结合动画是创新性和吸引力的用户体验的一个有力的工具。想象中的DOM元素流和移动页面中与教师同步互动视频和教程。为什么不能把视频和动画走新用户通过您的应用程序？或者说包括对你的营销页面你产品的视频，而不是静态的图像？忘乎所以是容易的视频可以如果你不小心成为更复杂的闪烁的标签。但有很多美丽的，视频紧密集成在一个设计鼓舞人心的例子。
苹果的营销新页面的MAC Pro是一个极好的例子，视频伸手从笼子到周围的内容。新的MAC PRO是出现在页面的中心，当你滚动，它猛扑，旋转和拆卸本身。支持复制的消失在描述你看到的是什么。
静态截图的新的着陆页不做新的MAC支持正义。（大图）
交互式视频的另一个好例子就是阿德里安Holovaty的soundslice。soundslice充满音乐的YouTube视频被切成小块指法（或标签），这是符号，吉他手使用学习音乐。
在与视频同步的底部保持音乐酒吧。（大图）
当你观看音乐视频，标签是动画的底部与音乐的时间，这样你可以跟着你的吉他。你甚至可以减缓视频或回路选择实践困难的部分，和标签动画将保持同步。
你如何添加视频设计？
如果你进入视频和动画在你的下一个项目，你不会有很多的资源依靠实施。不规范的，易于使用的，开放源码库同步视频和动画的存在，所以每实现一点不同。你应该使用一个JavaScript库或纯CSS动画关键帧和过渡？你应该自己的主机视频和利用HTML5的视频标签事件或使用YouTube和Vimeo？然后，你是怎么把动画视频？
在一起，我们将探讨上述问题的答案，更为我们建立我们自己的微的JavaScript框架。charlie.js提供了一种具有同步的视频和CSS3动画建筑页面简单易用的API。
charlie.js，在查利卓别林的名字命名。（图片来源）
最好的学习方法是通过做，所以让我们。
charlie.js做什么？
我们需要一种方法来创建动画，然后触发他们在某个时刻在一个视频。我们还需要暂停动画如果视频站，我们需要一种方式来处理用户跳来跳去不同的时间在视频。
限制了本文的范围，我们会charlie.js只使用CSS动画。JavaScript动画库比CSS动画更加灵活和强大，但包装一头周围的声明性语法简单，关键帧是相当容易的，而且效果也硬件加速。坚持只有CSS动画小项目的一个不错的选择。
保持简单，charlie.js将支持每个页面只有一个视频。
正如我们通过建立这个库的练习，记住，我们使用的框架来学习CSS动画和视频在网络上。我们的目标是学习，而不是创造高质量的代码。
定义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看见和知道运行会把动画一旦视频三秒。
褪色和把动画是一个样式表链接到文档定义。
这里是淡出动画可能看起来像(browser prefixes are excluded here but are required for Chrome and 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看见和知道运行会把动画一旦视频三秒。
褪色和把动画是一个样式表链接到文档定义。
这里是淡出动画可能看起来像
褪色的。是什么课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将编码在每一个你需要的格式，给你一个通用网址，你可以使用在您的视频标签，这将根据用户代理会自动选择正确的视频类型。
<视频id =“视频”src=“http://vid.ly/4m4e2n？视频内容=“控制=“预紧力=“不”>
您的浏览器不支持HTML5视频元件。
<视频>
抬起头
JavaScript在大多数这些片段使用下划线；像_。foreach和_ toArray。从图书馆的效用函数。强调鼓励编程，如果你从来没有见过它看起来奇怪的一个功能性的风格，但是一点时间投入学习强调可以为您节省大量的时间和代码行。这是值得检查。在这篇文章中，你会发现代码中的注释告诉你发生了什么，它应该很容易理解。
另一个警告：下面的代码将运行在大多数现代浏览器，但没有尝试已作出这完全跨浏览器兼容的。如果你的企业真正需要的CSS动画要同步的视频和运行在几乎所有的浏览器，那么这个库将不帮助你。但我的生意，甚至你的，只支持现代浏览器是好的。即使有这样的限制，这里的许多材料还是值得学习。
JavaScript的CSS动画控制
JavaScript和CSS视频动画之间的胶水。有没有办法对动画视频纯CSS。动画不能启动，直到施加的风格，和CSS只给你如此多的方式来触发额外的样式（如：悬停）。为了同步动画视频，我们需要暂停，停止，恢复，跳过中间，甚至反向运行动画。
所有这一切都是可能的JavaScript。因此，第一步是要获取的CSS动画的样式表和JavaScript。每一个CSS动画有两部分。第一部分是用于配置该动画关键帧和行为的属性，如时间，迭代和方向。第二部分是什么触发动画。charlie.js需要在样式表中找到两个部分。
我们首先需要的是一个效用函数，通过搜索，加载页面样式表。

findRules = function(matches){

  //document.stylesheets is not an array by default.
  // It's a StyleSheetList. toArray converts it to an actual array.
  var styleSheets = _.toArray(document.styleSheets),
  rules = [];

  // forEach iterates through a list, in this case passing
  //every sheet in styleSheets to the next forEach
  _.forEach(styleSheets, function(sheet){

  //This foreach iterates through each rule in the style sheet
  //and checks if it passes the matches function.
  _.forEach(_.toArray(sheet.cssRules), function(rule){
   if (matches(rule)){
    rules.push(rule);
   }
  });
 });
return rules;
}

该findrules函数遍历每个样式表的每一个规则，返回一个列表相匹配的功能通过比赛规则。让所有的关键帧的规则，我们传递一个函数来findrules是否检查规则是一个关键帧：// A little code to handle prefixed properties
 var KEYFRAMES_RULE = window.CSSRule.KEYFRAMES_RULE
  || window.CSSRule.WEBKIT_KEYFRAMES_RULE
  || window.CSSRule.MOZ_KEYFRAMES_RULE
  || window.CSSRule.O_KEYFRAMES_RULE
  || window.CSSRule.MS_KEYFRAMES_RULE,

  ...

  var keyframeRules = findRules(function(rule){
   return KEYFRAMES_RULE === rule.type;
  }),

  ...
在这一点上，我们在JavaScript中的关键帧，但是我们仍然需要定义的持续时间的动画风格，其余的迭代，方向等。
找到所有的这些类，我们再次使用findrules功能通过每个样式表的每一个规则。虽然这一次，比赛，我们会通过函数会检查看是否有AnimationName产权规则。...

 var animationStyleRules = findRules(function(rule){
  return rule.style && rule.style[animationName(rule.style)];
 });

 ...
该animationsname功能是有柄的前缀，因为AnimationName财产仍需要在一些浏览器中的前缀。这个功能看起来像这样：
...

if (style.animationName) {
 name = "animationName"; }
else if (style.webkitAnimationName) {
 name = "webkitAnimationName"; }
else if (style.mozAnimationName) {
 name = "mozAnimationName"; }
else if (style.oAnimationName) {
 name="oAnimationName"; }
else if (style.msAnimationName) {
 name = "msAnimationName"; }
else {
 name = "";
}
return name;

...

上一篇关于电子商务网站的一个小程(一)-郑州网站建设

下一篇FLASH网站的优缺点-郑州网络公司