【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 ...
随机推荐
- 谈MongoDB的应用场景
转载自:http://blog.csdn.net/adparking/article/details/38727911 MongoDB的应用场景在网上搜索了下,很少介绍关于传统的信息化应用中如何使用M ...
- ipkg-nas
http://pkg.entware.net/binaries/x86-64/ https://forum.synology.com/enu/viewtopic.php?t=95346 http:// ...
- GDB core命令的使用调试段错误
#include <stdio.h> void func(){ int *p = NULL; printf("*p:%d\n", *p);//断错误 } int mai ...
- Unity 绘制Mesh线条
using UnityEngine; using System.Collections; using System.Collections.Generic; public struct Segme ...
- macos high sierra 删除多余的管理员的步骤
自己查看了好多文档, 一个比较可靠的地址有两个,不过发现跟我的不一样, 我没有采用. 也在这里贴出来, 供需要的"折腾者"们看看. [某个外国大大的方法] (https://med ...
- 实现一个简易版webpack
现实 webpack 的打包产物 大概长这样(只把核心代码留下来): 实现一个简版的webpack 依葫芦画瓢,实现思路分2步: 1. 分析入口文件,把所有的依赖找出来(包括所有后代的依赖) 2. 拼 ...
- Note_4.1
2019/4/1 奇奇怪怪的笔记 多项式除法 问题描述 给定\(n\)次多项式\(A(x)\)和\(m\)次多项式\(B(x)\) 求: \[ A(x)=B(x)*C(x)+R(x) \] 我们要求\ ...
- Mybatis笔记(二)
目录 MyBatis 逆向工程 MyBatis Generator 使用 分页插件 1.下载分页插件 2.配置分页插件 3.使用分页插件 SSM整合(spring与springMVC) 1.创建web ...
- 第07组 团队Git现场编程实战
组员职责分工 团队成员 分工 杨明哲 爬数据,做网页 林兴源 合作编码完成了对美团数据的分析,分析出最有发展潜力的十佳好店 卞永亨 从大众点评分析出了服装商圈 林鑫 合作编码完成了对美团数据的分析,分 ...
- JWT Claims
JWT Claims “iss” (issuer) 发行人 “sub” (subject) 主题 “aud” (audience) 接收方 用户 “exp” (expiration time) 到 ...