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
Adobe Edge Animate –修改Edge Commons Spotlight功能,使之能支持播放中国网站视频相关推荐
- Adobe Edge Animate --点击元件内部元素使元件其他元素发生改变
Adobe Edge Animate --点击元件内部元素使元件其他元素发生改变 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 前面讲到的很多按钮操作都是 ...
- Adobe edge animate制作HTML5动画
Edge Animate是Adobe出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.Adobe Edge Animate的目的是帮助专业设计师制作网页动画乃至 ...
- Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
- Adobe Edge Animate 1.0 概述
Adobe Edge Animate 1.0 概述 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 一.主界面 从主界面我们可以直接进入: 1.工程操作(P ...
- Adobe Edge Animate --使用JQuery制作的美女拼图
Adobe Edge Animate --使用JQuery制作的美女拼图 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图: 一.图形元素制作 1.首 ...
- Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮.进度条.菜单效果 版权声明: 原文地址: http://www.cnblogs.com/ado ...
- Adobe Edge Animate 1.0-软件内部教程
软件内部教程: 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. Adobe Edge Animate内部的教程面板提供了一些实践教程,这些教程包含着实例资源 ...
- 《财富》500 强企业要求 curl 开源工具作者提供免费及时的支持;基于Chromium的Edge浏览器正在整合文本预测功能 | 开源日报
整理 | 宋彤彤 责编 | 屠敏 开源吞噬世界的趋势下,借助开源软件,基于开源协议,任何人都可以得到项目的源代码,加以学习.修改,甚至是重新分发.关注「开源日报」,一文速览国内外今日的开源大事件吧! ...
- android 版edge标签页,Edge Beta 版新功能:同步标签页和历史记录(附.APK)
软餐(ruancan.com)获悉,Android 平台上的微软 Edge Beta 版最新提供了和 PC 版 Edge 同步标签页和历史记录 的功能. 据悉,微软已经在安卓版的 Edge 浏览器 v ...
最新文章
- ASP.NET 2.0的异步页面刷新真给劲
- 研究人员首次实现人脑实时连接互联网,攻壳社会的前奏?
- [转]ASP.Net缓存总结
- WUTOJ 1284: Gold Medal(Java)
- MySQL、MongoDB、列数据库的区别及应用场景
- macOS查看IP地址的命令
- 做科研,到底应该看什么?
- Mysql 给你100万条数据的一张表,你将如何分页查询优化?
- 操作系统(5) 并发控制(1)线程的互斥
- 程序员笔记 CherryTree 0.99.28 发布
- s7-200与计算机modbus通讯案例,S7-200实现Modbus通信范例(绝对精华)
- HDFS的shell命令
- 扫描仪支持linux驱动,开源扫描仪驱动sane支持的扫描仪列表
- [机缘参悟-16]:FPGA编程、软件编程与公司管理有着相似原理
- 记录一下自己的春招,唯品会、360、京东offer已收、腾讯offer_call已达!!!
- 解决Google 云端硬盘,文件下载问题
- 引擎磨合 (Break In) 的秘密
- oracle如何设置连接数,关于Oracle连接数设置
- 要大进步就不能两手抓
- 【数据结构课程设计报告】电话号码查询系统(Java实现)
热门文章
- notepad++设置运行浏览器
- 证券极速交易服务器部署
- 不用检测软件如何查看电脑硬件的配置?
- Photoshop制作文字倒影
- win7 U盘中文件夹无法删除,粉碎后有出现且改变了文件名的处理方法,实测有效
- 简单通讯录c语言程序注释,Objective-C简易通讯录的实现
- 查看Mysql数据库连接IP
- win7怎么跳过硬盘自检_科普一分钟|BIOS引导+MBR硬盘格式装系统方法
- 发布Acro Multi-Language Suite for Delphi.Net
- 爱思唯尔---Elseviewer---预印本在线发表通知