搜索:

缓动效果,点击下面的效果名称组合查看效果

缓动名称:

缓动类别:

ckplayer提供了多种缓动效果,助你在播放器上做出各种不同的效果,元件可以从播放器的任何位置出现,结束于任何位置,弹幕里可以放置图片(包含png,jpg,jpeg,gif),支持放置swf,支持文本框,并且各元件支持和播放器或js进行互动

调用代码如下:

<script type="text/javascript" src="ckplayer/x/ckplayer.js"></script>
<div class="video" style="width: 1000px;height: 600px;"></div>
<script type="text/javascript">
	var nowI = 5;
	var effectName = 'None',
		typeName = 'easeIn';
	var speed = 5;
	var attribute = 'x';
	var start = 0,
		end = 0;
	var animatePosition = [];
	var alpha = 1;
	$(document).ready(function($) {
		$('.effect').click(function() {
			effectName = $(this).val();
			newAnimate();
		});
		$('.type').click(function() {
			typeName = $(this).val();
			newAnimate();
		});
		$('.speedx').change(function() {
			speed = $(this).val();
		});
		$('.attributex').change(function() {
			attribute = $(this).val();
		});
	});
	var playerLoad = false;
	var videoObject = {
		container: '.videosamplex', //“#”代表容器的ID,“.”或“”代表容器的class
		variable: 'player', //该属性必需设置,值等于下面的new chplayer()的对象
		autoplay: false,
		poster: 'pic/wdm.jpg',
		loaded: 'loadedHandler',
		video: 'http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4' //视频地址
	};
	var player = new ckplayer(videoObject);

	function loadedHandler() { //播放器加载后会调用该函数
		playerLoad = true;
	}

	function newAnimate() {
		if(!playerLoad) {
			alert('播放器还没有加载,不能添加缓动');
			return;
		}
		alpha = 1;
		nowI += 30;

		switch(attribute) {
			case 'x':
				animatePosition = [2, 0, 0, nowI];
				break;
			case 'y':
				animatePosition = [0, 2, nowI, 0];
				break;
			case 'alpha':
				animatePosition = [0, 0, nowI, nowI];
				alpha = 0;
				break;
		}
		var obj = {
			list: [ //list=定义元素列表
				{
					type: 'png', //定义元素类型:只有二种类型,image=使用图片,text=文本
					file: 'pic/logo.png', //图片地址
					radius: 30, //图片圆角弧度
					width: 30, //定义图片宽,必需要定义
					height: 30, //定义图片高,必需要定义
					alpha: 0.9, //图片透明度(0-1)
					marginLeft: 10, //图片离左边的距离
					marginRight: 10, //图片离右边的距离
					marginTop: 10, //图片离上边的距离
					marginBottom: 10, //图片离下边的距离
					clickEvent: "link->http://www.ckplayer.com"
				}, {
					type: 'text', //说明是文本
					text: '演示弹幕内容,支持互动功能 ,点击可以播放视频', //文本内容
					color: '0xFFDD00', //文本颜色
					size: 14, //文本字体大小,单位:px
					font: '"Microsoft YaHei", YaHei, "微软雅黑", SimHei,"\5FAE\8F6F\96C5\9ED1", "黑体",Arial', //文本字体
					leading: 30, //文字行距
					alpha: 1, //文本透明度(0-1)
					paddingLeft: 10, //文本内左边距离
					paddingRight: 10, //文本内右边距离
					paddingTop: 0, //文本内上边的距离
					paddingBottom: 0, //文本内下边的距离
					marginLeft: 0, //文本离左边的距离
					marginRight: 10, //文本离右边的距离
					marginTop: 10, //文本离上边的距离
					marginBottom: 0, //文本离下边的距离
					backgroundColor: '0x000000', //文本的背景颜色
					backAlpha: 0.1, //文本的背景透明度(0-1)
					backRadius: 30, //文本的背景圆角弧度
					clickEvent: "actionScript->videoPlay"
				}
			],
			//x: 10, //元件x轴坐标,注意,如果定义了position就没有必要定义x,y的值了,x,y支持数字和百分比,使用百分比时请使用单引号,比如'50%'
			//y: 50, //元件y轴坐标
			//position:[1,1],//位置[x轴对齐方式(0=左,1=中,2=右),y轴对齐方式(0=上,1=中,2=下),x轴偏移量(不填写或null则自动判断,第一个值为0=紧贴左边,1=中间对齐,2=贴合右边),y轴偏移量(不填写或null则自动判断,0=紧贴上方,1=中间对齐,2=紧贴下方)]
			position: animatePosition,
			alpha: alpha, //元件的透明度
			//backgroundColor: '0xFFDD00', //元件的背景色
			backAlpha: 0.5, //元件的背景透明度(0-1)
			backRadius: 60, //元件的背景圆角弧度
			clickEvent: "actionScript->videoPlay"
		}
		var ele = player.addElement(obj);
		var eleObj = player.getElement(ele);
		switch(attribute) {
			case 'x':
				start = null;
				end = 0 - eleObj['width'];
				break;
			case 'y':
				start = '85%';
				end = 0 - eleObj['height'];
				break;
			case 'alpha':
				start = 0;
				end = 1;
				alpha = 0;
				break;
		}
		if(nowI > 160) {
			nowI = 5;
		}
		var obj = {
			element: ele,
			parameter: attribute,
			static: true, //是否禁止其它属性,true=是,即当x(y)(alpha)变化时,y(x)(x,y)在播放器尺寸变化时不允许变化
			effect: effectName + '.' + typeName,
			start: start,
			end: end,
			speed: speed,
			overStop: true,
			pauseStop: true,
			callBack: 'deleteChild'
		};
		var animate = player.animate(obj);
	}

	function deleteChild(ele) {
		if(player) {
			window.setTimeout(function() {
				player.deleteElement(ele);
			}, 1000);

		}
	}
</script>
Powered by ckplayer.com
Copyright©ckplayer,2011-2017( 苏ICP备11026158号 )