HTML5:Animate cc交互之视频自动播放跳转下一帧

原创 2018年04月16日 20:58:45

1.实现功能

一个视频在播放,播放结束后,才能跳转下一帧,播放第2个视频,并跳到第3帧

是没有按钮的!

2.步骤:

a.第一帧

	this.frame_4 = function() {
		S = this;
		S.stop();
		S.video1.on("added", function() {
			var md = $("#video1")[0];
			md.addEventListener("ended",function(){
		 	 S.gotoAndStop(5);
		  })
		});
	}

b.第二帧

	this.frame_5 = function() {
		S.stop();
		S.video2.on("added", function() {//added视频播放结束后发生的事件
			var mdtwo = $("#video2")[0];//获取到当前舞台上的视频
			mdtwo.addEventListener("ended",function(){
		  		S.gotoAndStop(6);
		  })
		});
	}

HTML5:Animate cc交互功能之全屏化

1.实现效果图,如下:点击进入:全屏再点击退出:全屏2.代码如下:a.对webkit、moz、ms等浏览器做个兼容处理 function fulls_btn_h(e) { var isFu...
  • wrk2466836002
  • wrk2466836002
  • 2018-04-16 14:45:05
  • 19

HTML5:Animate cc交互功能之跳转下一帧

一 、实现用户交互功能(点击按钮跳转下一帧)S.gotoAndStop解释:跳转到舞台上的某一帧并停止S.gotoAndPlay解释:跳转到舞台上的某一帧并开始播放下一帧方法1:跳转帧数if (!S....
  • wrk2466836002
  • wrk2466836002
  • 2018-04-15 15:30:03
  • 6

教你一招让你高效搞定高品质的H5交互动画

一般在H5开发流程中,都是交互动画设计师利用Animate cc(即原来的Flash)把动画的原型设计出来,然后交付给UI部门进行开发实现效果。而做过动画开发的UI都知道搞动画开发是较为耗时费力的,而...
  • yylurex
  • yylurex
  • 2017-05-08 15:58:12
  • 3239

【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5,入门教程

前提环境: ①安装好Adobe Animate CC ②安装好WebStorm,或者Sublime Text 2,Visual Studio Code之类的编程ide 流程:...
  • arvin0
  • arvin0
  • 2016-07-26 11:03:51
  • 16938

Adobe Animate CC 在图形中添加交互性代码

最近在研究HTML Canvas,涉及到Adobe Animate CC的使用,看了一下官方文档,很繁琐,下面简单的总结了一下在图形中添加交互性代码的方法。AnimateCC在图形中添加交互性代码的方...
  • qq_36173194
  • qq_36173194
  • 2018-03-03 15:51:24
  • 177

Edge Animate轻松制作HTML5动画教程及源码

  • 2015年11月21日 13:37
  • 8.12MB
  • 下载

html5动画制作工具Adobe Edge Animate

由于本人工作需要,需要做一些ipad杂志,杂志里需要一些动态效果,ipad不兼容flash,所以html5,css3在ipad动画特效中是一个很好的解决方案。偶尔接触到adobe新推出的 Edge A...
  • just_do_it2009
  • just_do_it2009
  • 2013-04-23 10:19:00
  • 2036

HTML5 插入视频 自动播放

four in one vedio video.margin {margin:-7px -10px 0 -2px}    Your browse...
  • wangmin_12
  • wangmin_12
  • 2014-11-20 10:04:59
  • 2939

Adobe Animate:创建HTML5动画01软件基本问题

目前用的是Adobe Edge Animate cc 2015版 ,刚刚接触记录一些简单的操作步骤。 Adobe Edge Animate中文操作手册 :http://www.docin.com/...
  • ymc_webpack
  • ymc_webpack
  • 2017-02-17 09:48:30
  • 397

html5 video自动播放下一个源码

演示地址:http://wjsou.com/video.html 小视频-循环播放 $(document).ready(function()...
  • chenhao0568
  • chenhao0568
  • 2017-04-04 17:54:19
  • 2809
收藏助手
不良信息举报
您举报文章:HTML5:Animate cc交互之视频自动播放跳转下一帧
举报原因:
原因补充:

(最多只允许输入30个字)