结合前两篇分析微信内嵌视频1（案例分析）https://segmentfault.com/a/11...从AnimateCC到CreateJS入门https://segmentfault.com/a/11...这次是createjs结合内联视频完成UI的demo。因为忘记原地址了，大家只能自己跑一个简单的效果demo了。您需要简单地构建一个服务器来运行它。否则createjs会简单分析一下图片资源参考，总结一下实现思路。主要是通过两个标签来实现的。video标签实现了在手机端嵌入视频播放canvas标签来控制ui层。而在与UI交互时，要操作视频，先将fla文件导出到代码中，生成代码如下：与上次不同的是，这次发布的代码多了一段自适应屏幕尺寸的代码，这是animateCC2017的新特性，功能在releasesettings中查看以上内容,animateCC会生成自适应手机宽高的页面。OK，那么进入正题，需要实现动画和视频的交互，需要触发animateframe中的一些事件。您需要使用createJs类EventDispatcher事件侦听器和事件调度来管理队列提供方法varmodel=newcreatejs.EventDispatcher();新建一个实例然后model.addEventListener("videoPlay1",function(){Loop(video,0)})监听触发的事件然后使用animateCC打开fla文件和打开page1查看在时间轴上，我添加了一些代码片段用于右键单击的帧选择操作/*鼠标单击事件单击此指定的符号实例会执行一个函数，您可以在其中添加自己的自定义代码。说明：1.在以下“//BEGINYOURCUSTOMCODE”行之后的新行中添加您的自定义代码。单击此符号实例时将执行此代码。*/this.enter_btn.addEventListener("click",fl_MouseClickHandler.bind(this));functionfl_MouseClickHandler(){//开始您的自定义代码//此示例代码显示“鼠标单击”。console.log(111)this.gotoAndPlay(20);if(model)model.dispatchEvent("videoPlay1");//endyourcustomcode}seetheexistingcodeinthepopupwindowactionwindow这段代码需要说明一下，变量enter_btn需要自己命名一个元素，这样点击这个元素就可以调用了。这个名字需要在元素第一次出现在时间线上的frame处命名，否则可能会出现无法调用的Condition。那么上面这段代码就是点击这个按钮，跳到第20帧，触发“videoPlay1”事件，而我们刚刚在new时间监听的model类在外部js中监听到了这个事件，我们在相应的地方可以控制视频操作functionLoop(obj,index){if(obj.timer){clearInterval(obj.timer);}obj.play();obj.timer=setInterval(function(){vart=obj.currentTime;//视频循环时间点if(Math.abs(t-videoTimeArr[3*index+1])<=.1){obj.currentTime=videoTimeArr[3*index];//obj.play();//clearInterval(obj.timer);}//动画播放时间点if(Math.abs(t-videoTimeArr[3*index+2])<=.1){playAnimate(index);}},20);}将video对象传入，启动一个定时器判断视频进度是否到了我们需要的循环点。如果到达循环点，则返回初始点，循环播放后面有地方。有返回按钮，按钮也有对应的返回视频片段，点击返回时播放对应视频片段，返回目标时间点函数unloop(obj,index){if(obj.timer){clearInterval(obj.timer);}obj.currentTime=videoBackwardTimeArr[3*index];obj.play();obj.timer=setInterval(function(){vart=obj.currentTime;if(Math.abs(t-videoBackwardTimeArr[3*index+1])<=.1){obj.currentTime=videoBackwardTimeArr[3*index+2];obj.play();Loop(obj,0)varview=stage.children[0].view;view.gotoAndStop(29)}},20);}下面附上演示代码，感谢链接：http://pan.baidu.com/s/1mijrS7Y密码：pth1
