(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. MySQL中怎么将LIMIT分页优化?

     1.语法:       *** limit [offset,] rows       一般是用于select语句中用以从结果集中拿出特定的一部分数据.       offset是偏移量,表示我们现在 ...

  2. CocoaPods加载第三方库

    http://code4app.com/article/cocoapods-install-usage

  3. 洛谷 AT2434 JOI 公園 (JOI Park) 题解

    人生第一次AC黑题,我太感动了. 每日一题 day31 打卡 Analysis 先跑遍DJ,求出1到 i的最短路.得到每个点到 1号点的距离后,从小到大排序一遍,这时便可以枚举每个点到 1号点的距离修 ...

  4. 【CSS】知识笔记

    一.CSS文件 1.引用css文件,放在Head里面,可以减少repaint和reflow. 浏览器渲染页面大概是这样的,当浏览器从上到下一边下载html生成DOM tree一边根据浏览器默认及现有C ...

  5. 检测 nginx 关闭切换keepalived

    检测nginx 端口启用  关闭 keepalived  检测 nginx 进程:然后关闭 keepalived ,关闭漂移IP : cat nginx_pid.sh #!/bin/bash whil ...

  6. [golang]golang如何覆盖输出console,实现进度条;golang一个骚气的进度提示库

    [golang]golang如何覆盖输出console,实现进度条 package main import( "fmt" "os" "time&quo ...

  7. Pytest权威教程06-使用Marks标记测试用例

    目录 使用Marks标记测试用例 在未知标记上引发异常: -strict 标记改造和迭代 返回: Pytest权威教程 使用Marks标记测试用例 通过使用pytest.mark你可以轻松地在测试用例 ...

  8. vue列表拖拽排序功能实现

    1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束 ...

  9. @Autowired静态变量

    @Component public class UserUtil{ private static Config config; @Autowired public void setConfig(Con ...

  10. cookie 的HttpOnly 和 Secure 属性

    设置HttpOnly=true的cookie不能被js获取到,无法用document.cookie打出cookie的内容. Secure属性是说如果一个cookie被设置了Secure=true,那么 ...