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

  

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

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

     1.电脑版网站: 电脑版网站是指用户通过台式或者笔记本电脑浏览器打开的网站,也就是我们平时上网所访问的网站.其支持和兼容IE6.IE7.IE8.IE9.IE10.Firefox.Chrome等各种主 ...

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

    /* * Copyright (C) 2006 The Android Open Source Project * Copyright (c) 2014 Chukong Technologies In ...

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

    原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...

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

    原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,5 ...

  5. Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

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

    今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...

  7. WPF环境下多点触屏开发的一些经验(转)

    本系列将介绍Multi-Touch(MT)多点触控技术的相关内容,使开发人员了解如何在Windows 平台中开发出具有MT 功能的应用程序.众所周知Windows 7 操作系统自身已经支持具有MT 功 ...

  8. Android开发笔记——视频录制播放常见问题

    本文分享自己在视频录制播放过程中遇到的一些问题,主要包括: 视频录制流程 视频预览及SurfaceHolder 视频清晰度及文件大小 视频文件旋转 一.视频录制流程 以微信为例,其录制触发为按下(住) ...

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

    lookingstars/JZVideoDemo  视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo  iOS vi ...

随机推荐

  1. 精妙的SQL语句

      说明:复制表(只复制结构,源表名:a 新表名:b)select * into b from a where 1<>1 说明:拷贝表(拷贝数据,源表名:a 目标表名:b)insert i ...

  2. DBA 有哪些工作

    首先,我们看看DBA的工作有哪些?DBA的工作实际上都是围绕数据库展开,包含但不限于这些工作: 1. 数据库.主机.操作系统.交换机.存储选型,预算,架构设计,部署,参数优化: 2. 数据库备份.恢复 ...

  3. IDEA激活码(直到2020年6月)

    K6IXATEF43-eyJsaWNlbnNlSWQiOiJLNklYQVRFRjQzIiwibGljZW5zZWVOYW1lIjoi5o6I5p2D5Luj55CG5ZWGOiBodHRwOi8va ...

  4. C语言函数的定义和使用(2)

    一:无参函数 类型说明符 get(){ //函数体 } 二:无参函数 类型说明符 getname(int a,int b){ //函数体 } 三:类型说明符包括: int ,char,float,do ...

  5. 洛谷 P3367 并查集模板

    #include<cstdio> using namespace std; int n,m,p; ]; int find(int x) { if(father[x]!=x) father[ ...

  6. 洛谷 P1714 切蛋糕 题解

    P1714 切蛋糕 题目描述 今天是小Z的生日,同学们为他带来了一块蛋糕.这块蛋糕是一个长方体,被用不同色彩分成了N个相同的小块,每小块都有对应的幸运值. 小Z作为寿星,自然希望吃到的第一块蛋糕的幸运 ...

  7. vundle 管理插件

    前言:如果不使用vundle的话,进行插件的安装,配置和管理相对会麻烦,曾经没使用vundle的时候我经常遇到无法安装一些vim插件.但使用vundle后你只要在文件中添加一行你的插件名再安装就OK了 ...

  8. LOJ2434. 「ZJOI2018」历史 [LCT]

    LOJ 思路 第一眼看似乎没有什么思路,试着套个DP上去:设\(dp_x\)表示只考虑\(x\)子树,能得到的最大答案. 合并的时候发现只有\(x\)这个点有可能做出新的贡献,而做出新贡献的时候必然是 ...

  9. 解决idea中maven默认jdk为1.5的问题 : IntelliJ IDEA 源值1.5已过时,将在未来所有版本中删除

    解决idea中maven默认jdk为1.5的问题 最近运行总是报警告: IntelliJ IDEA 源值1.5已过时,将在未来所有版本中删除 发现是jdk版本问题, 即使自己修改structure中的 ...

  10. 利用pgAgent创建定时任务

    使用Postgresql自带的pgAgent,可以很方便地创建定时执行任务.现在网上的资料都比较旧,Postgresql版本更新得比较快,导致网上的一些教程都不合用了,现在我写分享一下自己的经验. P ...