Adobe Edge Animate --如何在Edge中播放视频文件
版权声明:
本文版权属于 北京联友天下科技发展有限公司。
转载的时候请注明版权和原文地址。
前面的教程讲到在Edge中添加音频文件并且进行播放控制,下面将为大家讲解两种代码实现如何在Edge中添加视频文件。
一、如下图所示,在Adobe Edge中创建元件和元素:
舞台框架结构如下:
其中元件frame_video的内部结构如下:只有一个矩形(注意:要用到这个矩形的id,即名称,我们这里把它命名为video_container)
二、在库面板中双击元件frame_video,点击Open Action按钮添加creationcomplete函数:
附:函数代码
var vid = $("<video width='419' height='246' controls='controls'>" +
"<source src='video/bunny.mp4' type='video/mp4' />" +
"<source src='video/bunny.ogv' type='video/ogg' />" +
"This browser is not compatible with HTML 5" +
"</video>"
);
sym.$("video_container").append(vid);
vid.attr('autoplay','autoplay');
vid.attr('preload','auto');
三、保存工程,在工程目录下新建video文件夹,添加bunny.mp4文件,这里mp4文件需要符合要求,25帧每秒,本人一开始用优酷下载的文件只有15帧每秒就不可以播放了。
Ctrl+Enter在浏览器中预览文件,可以看到视频正常播放了。
注:这里要如何实现居中呢,我们在以前的教程中也说到,为Stage添加creationcomplete函数如下:
就可以实现居中显示了。
四、另外一种代码实现方法:
附函数代码:
var vid = $("<video controls autoplay name='media'><source src='video/bunny.mp4' type='video/mp4'></video>");
sym.$("video_container").append(vid);
使用这种代码实现方式也可以实现正常播放视频。
本文地址:
http://www.cnblogs.com/adobeedge/archive/2012/12/25/Adobe_Edge_Animate_video.html
作者:北京联友天下科技发展有限公司 肖伟民
转载于:https://www.cnblogs.com/adobeedge/archive/2012/12/25/Adobe_Edge_Animate_video.html