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属性,让视频是否自动播放。