【WAP触屏】YouKu视频弹窗播放组件

 

 

 

(function(window){
/*	
	youku api : http://open.youku.com/tools

	调用方法 : LM_youkuPop.open('XODI5Mzk3MDAw');
*/

var head = document.getElementsByTagName('head')[0],
	youkuApi = 'http://player.youku.com/jsapi',
	cssTmpl = '#LM-youkuPop{display:none; z-index: 999; position: fixed;top:0;left:0;width: 100%;height: 100%;background: rgba(0,0,0,0.9);}'+
			  '#LM-youkuPop-close{position: absolute;top:20px;right:20px;width: 30px;height: 30px;background-color: #fff;color: #000;text-align: center;line-height: 30px;font-size: 20px;-webkit-border-radius:99px;}'+
			  '#LM-youkuPop-youkuPlayer{width: 100%;height: auto; position: absolute;top:50%;left:0;-webkit-transform: translateY(-50%);}';

var LM_youkuPop = {
	init:function(){
		this.creatScript(youkuApi).creatStyle(cssTmpl).creatPop().bindEvent();
	},

	open:function(vid){
		this.vid = vid;
		if(!this.script){this.init();}
		if(!this.isScript){return this.loadScript();}

		this.box.style.display = 'block';
		player = new YKU.Player('LM-youkuPop-youkuPlayer',{
	         'styleid': "0",
	         'client_id': "d841b3f800b5ce4b",
	         'vid': this.vid,
	         'autoplay': true
		});
	},

	isScript:false,

	loadScript:function(){
		var that = this;
		this.script.onload = function() {
			if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
				that.isScript = true;
				that.open(that.vid);
			}
		}
	},

	close:function(){
		this.box.style.display = 'none';
		document.getElementById('LM-youkuPop-youkuPlayer').innerHTML = '';
	},

	bindEvent:function(){
		var that = this;
		document.getElementById('LM-youkuPop-close').onclick = function(){
			that.close();
		};
		return this;
	},

	creatPop:function(){
		var div=document.createElement('div');
		div.id = 'LM-youkuPop';
		div.innerHTML = '<div id="LM-youkuPop-close">X</div><div id="LM-youkuPop-youkuPlayer" style="width:100%;height:240px;"></div>';
		document.body.appendChild(div);
		this.box = div;
		return this;
	},

	creatStyle :function (css){
		var style=document.createElement('style');
		style.innerHTML = css;
		head.appendChild(style);
		return this;
	},

	creatScript :function (url){
		var script=document.createElement('script');
		script.src = url;
		head.appendChild(script);
		this.script = script;
		return this;
	}
	
}


window['LM_youkuPop'] = LM_youkuPop;

})(window)