【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)

  

时间: 2024-11-10 14:21:29

【WAP触屏】YouKu视频弹窗播放组件的相关文章

常用的jquery触屏手机页面特效代码下载

js手机幻灯片代码制作手指滑动手机端图片轮播代码 jQuery移动端页面侧边导航菜单滑出效果代码 jquery.touchswipe.js手机端网页制作触屏滑动导航显示代码 jquery响应式幻灯片插件制作图片弹出手机幻灯片代码 jquery mobiscroll手机日期控件制作手机端日期控件 js手指滑动手机端列表加载动画效果 jquery手机导航菜单仿微信底部菜单代码 jquery html5手机触屏版点击弹出层对话框响应式网页布局代码 js手机端带进度条图片展示触屏滑动效果 jquery

WAP、触屏版网站及APP的区别

 1.电脑版网站: 电脑版网站是指用户通过台式或者笔记本电脑浏览器打开的网站,也就是我们平时上网所访问的网站.其支持和兼容IE6.IE7.IE8.IE9.IE10.Firefox.Chrome等各种主流浏览器,该网站通常包含一些网站应用程序及系统(如:CMS网站内容管理系统等),并包含了独立的数据库及完整的后台管理系统,是企业开展网络营销和电子商务的基础. 为了管理和维护方便,其手机WAP版网站.手机触屏版网站.手机APP应用等通常共享同一个数据库和管理后台. 2.手机WAP版网站: WAP网站

Cocos2dx3.11.1Android播放视频,后台 黑屏,无法记忆播放bug修改

/* * Copyright (C) 2006 The Android Open Source Project * Copyright (c) 2014 Chukong Technologies Inc. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You m

沫沫金:BootStarp轮播组件(carousel)支持触屏【Hammer】

外国人,还是牛逼. 下载两个JS 1.http://hammerjs.github.io/ 2.https://github.com/hammerjs/jquery.hammer.js 注意:引入顺序1>2     <!-- 增强:BootStrap carousel(轮播)组件支持触屏 -->     <script src="dep/jquery.hammer.js-master/hammer.min.js"></script>     &

WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现

原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了,经过努力奋

WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现

原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,54寸大屏电脑电视一体机.要求有很炫的展示效果,要有一定的视觉冲击力,可触控操作.当然满足客户的要求也可以有其它途径.但鉴于咱是搞 .NET技术的,首先其冲想到的微软WPF方面,之前对WPF的了解与学习也只是停留在比较浅的层面,没有进一步深入学习与应用.所以在项目接来以后,也就赶鸭子上架了

前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想

今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断是否客户端打开都依赖于后端,通过app主动拼接参数的方式,传递给后端,后端告诉前端本次的加载是在app里还是app外,实现页面的特殊功能 那我们发现,这个方式环节和局限性太多,我们无法保证客户端一定能够每个触屏页面都拼接我们需要的参数,而且我们的触屏页面有很多种,有的是活动需要的,有的是动态,有的是

解决手机微信浏览器视频自动播放和默认全屏问题

1.早期因为带宽和流量的因素,移动端浏览器禁止视频自动播放,现在现在流量便宜了.手机硬件越来越好了,部分可支持了2.在移动端浏览器, video 在用户点击播放或者通过API video.play() 触发播放时,会强制以全屏置顶的形式进行播放,设计的初衷可能是因为全屏能提供更好的用户体验 <video controls="controls" src="" id="ckplayer_a1" x5-video-player-type=&quo

github视频录制播放相关功能-参考

lookingstars/JZVideoDemo  视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo  iOS video cut ,also can add blackgroundmusic iOS 视频剪辑,视频添加背景音乐 Updated on 13 Jun 2014 Objective-C 139 50 835239104/KrVideoPlayerPlus  根据36Kr开源的KRVideoPlayer