Adobe Edge Animate –修改Edge Commons Spotlight功能，使之能支持播放中国网站视频

雨点打透心脏的1/2处 2021-11-14 13:08 198阅读 0赞

*本文版权属于 北京联友天下科技发展有限公司。*

*转载的时候请注明版权和原文地址。*

本例子将为大家讲解如何使用Edge Commons的Spotlight功能。

Edge Commons的官方Spotlight功能包括：显示图片、显示html、播放youbube视频三种，在此，将为大家讲解如何修改Edge Commons，来达到播放国内视频门户网站的视频，如：优酷、乐视网、激动网、凤凰网等。

效果图：

![Image 1][]

一、制作按钮和相关素材

1、首先需要制作按钮，本例子将按钮制作如下图：

![Image 1][]

2、一张图片，用于spotlight显示图片功能，本例子使用Edge Animate logo：

![Image 1][]

3、一个Edge Animate html文件，可以用Edge Animate简单编辑一个动画，放置在工程根目录下，本例子使用Edge Animate编辑了about.html

二、导入Edge Commons

在[http://cdn.edgecommons.org][http_cdn.edgecommons.org] 下载Edge Commons，将之解压到工程根目录下，本例子将之解压在lib文件夹中，spotlight需要的文件有EdgeCommons.Spotlight.js  style.css文件和img文件夹中的图片资源，这些都是需要保留的文件。

在stage中添加compositionReady函数，将js等文件yepnope进来：

![Image 1][]

yepnope(\{

load: \[

"lib/EdgeCommons.Spotlight.js",

"lib/style.css",\],

complete: function()\{

EC.centerStage(sym);

\});

三、添加Spotlight显示图片功能

在显示图片按钮添加click事件：

![Image 1][]

var config = \{

width: 88,   //图片宽度

height: 84,   //图片高度

type: "image",  //类型，此处为图片

source: "img/edge.png"  //路径，图片放置在工程根目录下img文件夹中

\};

EC.Spotlight.open( config );

在浏览器中预览，我们可以看到点击按钮，就会显示spotlight效果的图片，点击关闭按钮或者页面其他地方可以关掉图片。

四、添加Spotlight显示动画文件功能：

在用于点击显示动画的按钮添加click事件：

![Image 1][]

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按钮处：

![Image 1][]

如此处的rCcKbeyyqZQ就是对应的tag，或者说视频id，运行之后效果如图所示：

![Image 1][]

2、修改spotlight，使之能支持国内视频网站

（1）与youtube等相同，国内的视频网站也需要支持“分享”功能，在“分享”功能处有视频的flash地址，这样的视频网站才支持将视频内嵌到其他网页中，如下图：

![Image 1][]

（2）打开EdgeCommons.Spotlight.js文件，我们可以看到其中包括了几大类：image、animate、youtube，如下图：

![Image 1][]

其中，image是直接导入图片显示，而animate和youtube都是引用路径，显示在iframe框架中，下面我们也使用iframe框架来加载视频，在case “youtube”语句结束后，添加break，然后再添加一个case语句，名称可以自己定，在此我们定为“chinavideosite”：

![Image 1][]

;break;case "chinavideosite":e.append('<iframe width="'+a.width+'" height="'+a.height+'" src="'+a.source+'" frameborder="0" allowfullscreen></iframe>')

此外，可以在前方的侦错语句中添加&&"chinavideosite"!=a.type

到此，iframe显示的框架就已经搭建完成，在按钮中添加click事件，以下截图为几个视频网站的测试，都可以正常显示播放：

![Image 1][]

其中type为chinavideosite，而source则为对应的分享flash地址，我们还可以修改其中的autoplay属性，让视频是否自动播放。

![Image 1][]

原文地址：[http://www.cnblogs.com/adobeedge/p/Adobe\_Edge\_Spotlight.html][http_www.cnblogs.com_adobeedge_p_Adobe_Edge_Spotlight.html]

[Image 1]: 
[http_cdn.edgecommons.org]: http://cdn.edgecommons.org
[http_www.cnblogs.com_adobeedge_p_Adobe_Edge_Spotlight.html]: http://www.cnblogs.com/adobeedge/p/Adobe_Edge_Spotlight.html