(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. How To Set The Hostname On Ubuntu Or Debian?

    $ sudo hostnamectl set-hostname your-hostname $ sudo vim /etc/hosts Open the hosts file and add the ...

  2. Oracle row_number() over() 分析函数--取出最新数据

    语法格式:row_number() over(partition by 分组列 order by 排序列 desc) 一个很简单的例子 1,先做好准备 create table test1( id v ...

  3. bzoj 2969: 矩形粉刷 概率期望+快速幂

    还是老套路:期望图上的格子数=$\sum$ 每个格子被涂上的期望=$\sum$1-格子不被图上的概率 这样的话就相对好算了. 那么,对于 $(i,j)$ 来说,讨论一下上,下,左,右即可. 然后发现四 ...

  4. Subspace Subcode

    子码(subcode)的概念来自信息编码,不太容易理解.通常是子域编码(subfield subcode),也可以扩展到子空间编码(subspace subcode). 子空间或者子域编码的一个基本想 ...

  5. Hadoop 压缩

    压缩的好处 文件压缩的好处:减少文件存储锁需要的磁盘空间,加速数据在网络和磁盘上的传输. 常见的压缩格式 压缩格式 工具 算法 文件扩展名 是否可以切分 DELATE 无 DEFLATE     .d ...

  6. GO获取随机数

    使用的"math/rand"包. 基本随机数 a := rand.Int() b := rand.Intn(100) //生成0-99之间的随机数 fmt.Println(a) f ...

  7. PKUWC2020 游记

    因为CSP-S挂的并不厉害,蜜汁来到了PKU,所以有了这篇游记. DAY 0 上午在机房颓废,中途还整了一个出校证. 九点多,两个THU的大神去拿笔记本和手机颓废了,不久被两个教练拉着和kx跑了出去. ...

  8. SpringCloud服务Gradle本地jar配置

    1. 将jar包移到与src平级的目录内,并在build.gradle文件中配置如下: dependencies{ compile fileTree(dir:'libs/',include:" ...

  9. (转载)RNA表观遗传学开创者何川

    何川,RNA表观遗传学开创者.早年毕业于中国科技大学,2000年获麻省理工学院博士学位,2000到2002年在哈佛大学做博士后研究,2002年至今执教芝加哥大学化学系, 是芝加哥大学生物物理动态研究所 ...

  10. JVM Java字节码方法表与属性

    方法表 1.methods_count  method_info,前三个字段和field_info一样 2.方法的属性结构 方法中的每个属性都是一个attribut_info结构 JVM定义了部分at ...