Adobe Edge Animate --如何在Edge中播放视频文件

落日映苍穹つ 2021-12-01 13:08 906阅读 0赞

**Adobe Edge Animate --如何在Edge中播放视频文件**

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

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

前面的教程讲到在Edge中添加音频文件并且进行播放控制，下面将为大家讲解两种代码实现如何在Edge中添加视频文件。

**一、如下图所示，在Adobe Edge中创建元件和元素：**

![2012122517251265.jpg][]

舞台框架结构如下：

![2012122517252467.jpg][]

其中元件frame\_video的内部结构如下：只有一个矩形（注意：要用到这个矩形的id，即名称，我们这里把它命名为video\_container）

![2012122517253563.jpg][]

**二、在库面板中双击元件frame\_video，点击Open Action按钮添加creationcomplete函数：**

![2012122517254575.jpg][]

附：函数代码

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在浏览器中预览文件，可以看到视频正常播放了。

![2012122517255786.jpg][]

注：这里要如何实现居中呢，我们在以前的教程中也说到，为Stage添加creationcomplete函数如下：

![2012122517261370.jpg][]

就可以实现居中显示了。

**四、另外一种代码实现方法：**

附函数代码：

var vid = $("<video controls autoplay name='media'><source src='video/bunny.mp4' type='video/mp4'></video>");

sym.$("video\_container").append(vid);

![2012122517262494.jpg][]

使用这种代码实现方式也可以实现正常播放视频。

本文地址：

[http://www.cnblogs.com/adobeedge/archive/2012/12/25/Adobe\_Edge\_Animate\_video.html][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

[2012122517251265.jpg]: /images/20211201/eff03cdb19f94a8a9e918c7412baa63d.png
[2012122517252467.jpg]: /images/20211201/2fd451de57384ed0919b3641fd5c7281.png
[2012122517253563.jpg]: /images/20211201/d500b41fdb1f43ec835806dfd604bf45.png
[2012122517254575.jpg]: /images/20211201/a8d83353b2a04d9f9451799f4bb3e63b.png
[2012122517255786.jpg]: /images/20211201/18036f527cb14d1cb08579a8ef94d080.png
[2012122517261370.jpg]: /images/20211201/73fcfa3c003e42a095417de801f97300.png
[2012122517262494.jpg]: /images/20211201/f4ba662a45564da4ae6b4921d89174a0.png
[http_www.cnblogs.com_adobeedge_archive_2012_12_25_Adobe_Edge_Animate_video.html]: http://www.cnblogs.com/adobeedge/archive/2012/12/25/Adobe_Edge_Animate_video.html