【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)
【WAP触屏】YouKu视频弹窗播放组件的更多相关文章
- WAP、触屏版网站及APP的区别
1.电脑版网站: 电脑版网站是指用户通过台式或者笔记本电脑浏览器打开的网站,也就是我们平时上网所访问的网站.其支持和兼容IE6.IE7.IE8.IE9.IE10.Firefox.Chrome等各种主 ...
- Cocos2dx3.11.1Android播放视频,后台 黑屏,无法记忆播放bug修改
/* * Copyright (C) 2006 The Android Open Source Project * Copyright (c) 2014 Chukong Technologies In ...
- WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现
原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现
原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,5 ...
- Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
- 前端判断是否APP客户端打开触屏,实现跳转APP原生组件交互之遐想
今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...
- WPF环境下多点触屏开发的一些经验(转)
本系列将介绍Multi-Touch(MT)多点触控技术的相关内容,使开发人员了解如何在Windows 平台中开发出具有MT 功能的应用程序.众所周知Windows 7 操作系统自身已经支持具有MT 功 ...
- Android开发笔记——视频录制播放常见问题
本文分享自己在视频录制播放过程中遇到的一些问题,主要包括: 视频录制流程 视频预览及SurfaceHolder 视频清晰度及文件大小 视频文件旋转 一.视频录制流程 以微信为例,其录制触发为按下(住) ...
- github视频录制播放相关功能-参考
lookingstars/JZVideoDemo 视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo iOS vi ...
随机推荐
- (转载) 从0开始搭建SQL Server AlwaysOn 第二篇(配置故障转移集群)
这一篇是从0开始搭建SQL Server AlwaysOn 的第二篇,主要讲述如何搭建故障转移集群,因为AlwaysOn是基于Windows的故障转移集群的 在讲解步骤之前需要了解一下故障转移集群仲裁 ...
- 后端程序员常用的linux命令
1. windows ctrl+ - 终端窗口变小 ctrl + shift + = 终端窗口变大 1. mac command+ - 终端窗口变小 command ...
- Mysql 为什么不建议在 MySQL 中使用 UTF-8?
最近我遇到了一个bug,我试着通过Rails在以“utf8”编码的MariaDB中保存一个UTF-8字符串,然后出现了一个离奇的错误: Incorrect string value: ‘ð &l ...
- CentOS6.5 安装ES5.5
一.CURL查看已开启的ES es5.5:elasticsearch-5.5.2.tar.gz下载,百度云地址 https://pan.baidu.com/s/17oFOQlePLtUhhJHxEPR ...
- Apache Kylin v3.0.0-alpha 发布
Apache Kylin v3.0.0-alpha 发布 Apr 19, 2019 • Shaofeng Shi 近日 Apache Kylin 社区很高兴地宣布,Apache Kylin v3.0. ...
- Kubernetes 学习5 kubernetes资源清单定义入门
一.kubernetes是有一个restful风格的 API,把各种操作对象都一律当做资源来管理.并且可通过标准的HTTP请求的方法 GET,PUT,DELETE,POST,等方法来完成操作,不过是通 ...
- Java为什么会流行
为什么Java语言能长期占据编程语言排行榜首位? 面向对象设计,使用简单,可以很快速的入门: 开源生态做得好,很多可重用的组件,拿来即用: 跨平台,高性能,是做后台开发的首选 另一方面,Java命好, ...
- PHP中使用 Memcached 的测试案例
<?php class MemcacheController extends ControllerBase { public function indexAction() { session_s ...
- CF1097D 【Makoto and a Blackboard】
我们考虑对于一个\(N\),他如果变成了他的约数\(x\),那又会变成一个子问题 我们定义\(F(n, k)\)为n操作k次的期望个数 那么我们有\(F(n, k) =\sum_{x|n} F(x, ...
- 微信小程序开源
| UI组件 | | | | | | | | | weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库 | | | | | | zanui-weapp ★794 - 好用易扩展的小程 ...