Adobe Edge Animate –修改Edge Commons Spotlight功能，使之能支持播放中国网站视频
Adobe Edge Animate –修改Edge Commons Spotlight功能，使之能支持播放中国网站视频
版权声明:
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。
本例子将为大家讲解如何使用Edge Commons的Spotlight功能。
Edge Commons的官方Spotlight功能包括：显示图片、显示html、播放youbube视频三种，在此，将为大家讲解如何修改Edge Commons，来达到播放国内视频门户网站的视频，如：优酷、乐视网、激动网、凤凰网等。
效果图：
一、制作按钮和相关素材
1、首先需要制作按钮，本例子将按钮制作如下图：
2、一张图片，用于spotlight显示图片功能，本例子使用Edge Animate logo：
3、一个Edge Animate html文件，可以用Edge Animate简单编辑一个动画，放置在工程根目录下，本例子使用Edge Animate编辑了about.html
二、导入Edge Commons
在http://cdn.edgecommons.org 下载Edge Commons，将之解压到工程根目录下，本例子将之解压在lib文件夹中，spotlight需要的文件有EdgeCommons.Spotlight.js style.css文件和img文件夹中的图片资源，这些都是需要保留的文件。
在stage中添加compositionReady函数，将js等文件yepnope进来：
yepnope({
load: [
"lib/EdgeCommons.Spotlight.js",
"lib/style.css",],
complete: function(){
EC.centerStage(sym);
}
});
三、添加Spotlight显示图片功能
在显示图片按钮添加click事件：
var config = {
width: 88, //图片宽度
height: 84, //图片高度
type: "image", //类型，此处为图片
source: "img/edge.png" //路径，图片放置在工程根目录下img文件夹中
};
EC.Spotlight.open( config );
在浏览器中预览，我们可以看到点击按钮，就会显示spotlight效果的图片，点击关闭按钮或者页面其他地方可以关掉图片。
四、添加Spotlight显示动画文件功能：
在用于点击显示动画的按钮添加click事件：
var config = {
width: 800,
height: 480,
type: "animate",
source: "about/about.html"
};
EC.Spotlight.open( config );
在浏览器中预览，我们可以看到显示了spotlight效果的页面，加载的内容为edge制作的html动画。
五、添加spotlight播放视频功能：
由于Edge Commons中规定了只能显示image、animate、youtube，所以在type类型选择上，也只能选择这三种，下面我们首先制作可以播放youtube网站视频的功能，再修改js文件来达到可以播放国内视频门户网站视频的目的。
1、播放youtube视频
在点击播放spotlight效果的youtube视频按钮添加click事件：
var config = {
width: 800,
height: 600,
type: "youtube",
source: "1woru3cyFiw",
param: {
autoPlay: true
}
};
EC.Spotlight.open( config );
其中的source是指youtube视频的标签tag，具体对应的值为youtube视频网站下方是share按钮处：
如此处的rCcKbeyyqZQ就是对应的tag，或者说视频id，运行之后效果如图所示：
2、修改spotlight，使之能支持国内视频网站
（1）与youtube等相同，国内的视频网站也需要支持“分享”功能，在“分享”功能处有视频的flash地址，这样的视频网站才支持将视频内嵌到其他网页中，如下图：
（2）打开EdgeCommons.Spotlight.js文件，我们可以看到其中包括了几大类：image、animate、youtube，如下图：
其中，image是直接导入图片显示，而animate和youtube都是引用路径，显示在iframe框架中，下面我们也使用iframe框架来加载视频，在case “youtube”语句结束后，添加break，然后再添加一个case语句，名称可以自己定，在此我们定为“chinavideosite”：
;break;case "chinavideosite":e.append('<iframe width="'+a.width+'" height="'+a.height+'" src="'+a.source+'" frameborder="0" allowfullscreen></iframe>')
此外，可以在前方的侦错语句中添加&&"chinavideosite"!=a.type
到此，iframe显示的框架就已经搭建完成，在按钮中添加click事件，以下截图为几个视频网站的测试，都可以正常显示播放：
其中type为chinavideosite，而source则为对应的分享flash地址，我们还可以修改其中的autoplay属性，让视频是否自动播放。
原文地址：http://www.cnblogs.com/adobeedge/p/Adobe_Edge_Spotlight.html
