Skip to content

X
xiaoxiaoleTuia
Commit 225137c6 authored by liupengfei's avatar liupengfei
Browse files
Options

video

parent 88148681
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1810 additions and 1516 deletions
egret/advideo.css 0 → 100644
View file @ 225137c6
.video-contanier {
width: 100vw;
height: 100vh;
position: fixed;
overflow: hidden;
z-index: 10000;
left:0;
top: 0;
background: black;
}
.video-wrapper {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
display: flex;
flex-direction: column;
}
.video-instance {
z-index: 1;
object-fit: contain;
object-position: 50% 50%;
height: 0;
flex:1;
outline: none;
}
.video-inner-plugin {
};
.video-plugin {
position: absolute;
}
/* 分割 */
.video-control {
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
}
.video-voice {
width: 8vw;
height: 8vw;
position: absolute;
right: 4.4vw;
bottom: 24vw;
opacity: 0;
pointer-events: auto;
}
.video-control-muted {
position: absolute;
width: 100%;
height: 100%;
background:url('//yun.dui88.com/advideo2020muted.png') no-repeat;
background-size: contain;
display: none;
pointer-events: auto;
}
.video-control-voice {
position: absolute;
width: 100%;
height: 100%;
background:url('//yun.dui88.com/advideo2020voice.png') no-repeat;
background-size: contain;
display: none;
pointer-events: auto;
}
.video-close {
position: absolute;
right: 4.4vw;
top: 10.6vw;
width: 8vw;
height: 8vw;
background: url('//yun.dui88.com/advideo2020close.png') no-repeat;
background-size: contain;
opacity: 0;
pointer-events: auto;
}
.video-count-down {
position: absolute;
width: 8vw;
height: 8vw;
border-radius: 100%;
background:gray;
top:10.4vw;
left: 4.4vw;
display: none;
color: white;
font-size: 4.2vw;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: auto;
}
/* fenge */
.video-loading {
background: url('//yun.dui88.com/advideo2020viewfile.gif') no-repeat;
background-size: contain;
background-color:black;
width: 100%;
height: 100%;
left:0;
top:0;
}
/* fenge */
/* 落地页 */
.video-land-page-content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.video-land-page-content .app-close {
position: absolute;
width: 5.6vw;
height: 3.1vh;
top: 10.7vw;
right: 3.75vh;
}
.video-land-page-content .app-info-wrap {
box-sizing: border-box;
width: 84vw;
height: 78vw;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 4px;
}
.video-land-page-content .app-star-num {
display: flex;
align-items: center;
flex-direction: row;
margin-top: 2.4vw;
margin-bottom: 3.7vw;
}
.video-land-page-content .app-star-icon {
width: 5.3vw;
height: 5.3vw;
background-size: contain;
background-repeat: no-repeat;
margin-right: 10px;
}
.video-land-page-content .app-logo {
width: 18.7vw;
margin-top: 4vh;
height: 10.5vh;
background-size: 100%;
border-radius: 12px;
}
.video-land-page-content .app-name {
font-size: 24px;
font-weight: 400;
color: rgb(70, 63, 63);
line-height: 3.4vh;
text-align: center;
margin-top: 3vw;
}
.app-star-yellow {
background-image: url('/dafuweng/star-y.png');
}
.app-star-gray {
background-image: url('/dafuweng/star-g.png')
}
.app-star-half {
background-image: url('/dafuweng/star-half.png');
}
.video-land-page-content .app-button {
width: 44.2vw;
height: 9.8vw;
margin-top: 9.8vw;
background: rgba(110, 166, 232, 1);
border-radius: 4px;
font-size: 17px;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
/* fenge */
/* 底部插件 */
.video-footer-wrapper {
background:white;
}
.video-footer-wrapper {
height: 20.2vw;
display: flex;
align-items: center;
padding: 0 2.6vw;
z-index: 999;
justify-content: space-between;
opacity:0.95;
background: white;
}
.video-footer-wrapper .app-content {
display: flex;
flex-direction: row;
align-items: center;
}
.video-footer-wrapper .app-logo {
width: 14vw;
height: 14vw;
border-radius: 12px;
background-size: contain;
background-repeat: no-repeat;
}
.video-footer-wrapper .app-desc {
padding-left: 2.6vw;
}
.video-footer-wrapper .app-name {
font-size: 4.5vw;
color: block;
font-weight: 600;
}
.video-footer-wrapper .app-comment {
display: flex;
flex-direction: row;
margin-top: 1.3vw;
align-items: center;
}
.video-footer-wrapper .app-comment-num {
font-size: 3.4vw;
}
.video-footer-wrapper .app-star-num {
display: flex;
align-items: center;
flex-direction: row;
margin-right: 1.3vw;
}
.video-footer-wrapper .app-star-icon {
width: 4.6vw;
height: 4.6vw;
background-size: contain;
background-repeat: no-repeat;
}
.app-star-yellow {
background-image: url('//yun.dui88.com/advideo2020star-y.png');
}
.app-star-gray {
background-image: url('//yun.dui88.com/advideo2020star-g.png')
}
.app-star-half {
background-image: url('//yun.dui88.com/advideo2020star-half.png');
}
.video-footer-wrapper .app-button {
font-size: 4.2vw;
background: #4A90E2;
padding: 2.6vw 4.2vw;
text-align: center;
color: white;
border-radius: 4px;
}
\ No newline at end of file
egret/index.html
View file @ 225137c6
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<meta name="screen-orientation" content="portrait" /> <meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" /> <meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" /> <meta name="360-fullscreen" content="true" />
<link rel="stylesheet" type="text/css" href="./advideo.css" />
<style> <style>
html, html,
body { body {
...@@ -34,66 +35,6 @@ ...@@ -34,66 +35,6 @@
font-family: "FZY4JW"; font-family: "FZY4JW";
src: url("https://yun.duiba.com.cn/db_games/FZY4JW.TTF"); src: url("https://yun.duiba.com.cn/db_games/FZY4JW.TTF");
} }
.video-land-page-content {
position: absolute;
z-index: 99999;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.app-close {
position: absolute;
width: 5vw;
height: 5vw;
top: 5vw;
right: 5vw;
}
.app-info-wrap {
padding: 3vh 0;
box-sizing: border-box;
width: 84vw;
height: 40vh;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.app-logo {
width: 18.7vw;
margin-top: 4vh;
height: 10.5vh;
background-repeat: no-repeat;
background-size: 100%;
}
.app-name {
font-size: 24px;
font-weight: 400;
color: rgb(70, 63, 63);
line-height: 3.4vh;
text-align: center;
margin-top: 3vh;
}
.app-button {
width: 75.2vw;
height: 6.9vh;
margin: 4vh;
background: rgba(110, 166, 232, 1);
border-radius: 4px;
font-size: 17px;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
</style> </style>
</head> </head>
...@@ -214,7 +155,7 @@ ...@@ -214,7 +155,7 @@
} }
</script> </script>
<div id="video-contanier"></div>
<script src="output.js"></script> <script src="output.js"></script>
</body> </body>
......
egret/src/adVideo/adVideo.ts 100644 → 100755
View file @ 225137c6
This diff is collapsed.
egret/src/adVideo/dianxiangVideo.ts 0 → 100644
View file @ 225137c6
import { getAppInfo, getDefaultConfig, createUnique, reportGet, replaceUrl} from './utils';
import videoControl from './video-core/videoPlugin/videoControl/index';
const reflectConfig = {
ost: 'osType',
osv: 'osVersion',
sw: 'screenWidth',
sh: 'screenHeight',
connt: 'connectionType',
androidId: 'androidId',
}
const defautToNew = (raw, reflect) => {
const newObj = {};
for (let i in raw) {
if (reflect[i]) {
newObj[reflect[i]]= raw[i];
} else {
newObj[i] = raw[i];
}
}
return newObj;
};
let config = null;
function createConfig (appInfo, device) {
config = {};
console.log(device);
let { slotId, appId, appVersion, appName, appPackage, ip, connectionType, operatorType} = appInfo
config['app'] = {
appId: appId,
appVersion,
appName,
appPackage
};
config['slot'] = {
slotId,
adtype: 5,
slotheight: 250,
slotwidth: 350
}
config['device'] = Object['assign']({
deviceType: 1,
screenOrientation: 1,
ua: window.navigator.userAgent}, device);
// config['device'] = {
// "idfa": "abcdef123456789",
// "imei": "abcdef123456789",
// "mac": "12:34:56:78:90:ab",
// "androidId":
// "TestAndroidId123",
// "deviceType": 1,
// "osType": 1,
// "osVersion": "4.2.2",
// "vendor": "MEIZU",
// "brand": "MEIZU",
// "model": "MX5",
// "screenHeight": 1080,
// "screenWidth": 1920,
// "ua": 'Mozilla/5.0 (Linux; U; Android 9.0; en-us; Redmi Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13',
// "screenOrientation": 0,
// "imsi": "MEIZU",
// "ppi": 1
// }
config['network'] = {
ip,
connectionType: connectionType,
operatorType: operatorType,
lat: 0,
lon: 0
}
return config;
}
interface adRes {
errorCode: number,
ads: Array<any>
};
async function getVideo() {
let videoRes = {};
try {
if (!config) {
const appInfo = await getAppInfo()
console.log(getDefaultConfig());
const defaultConfig = defautToNew(getDefaultConfig(), reflectConfig);
console.log(defaultConfig);
config = createConfig(appInfo, defaultConfig);
}
config['requsetId'] = createUnique(config['network']['ip'])
const res: any = await window.fetch('http://47.95.31.238/adx/ssp/dspAdTest', {
body: JSON.stringify(config),
headers: {
'content-type': 'application/json;charset=UTF-8',
},
method: 'POST'
}).then(response => {
return response.json();
})
// console.log(res.json());
// const adRes = res.json();
console.log(res);
if (res.errorCode === "200" && res.ads && res.ads.length > 0) {
return videoRes = res.ads[0];
} else {
return false;
}
} catch(err) {
console.log(err);
return false;
}
}
function dianxingReplace(raw, url, times, event) {
let pagesX, pagesY
const date = +new Date();
let clickId = raw.metaGroup[0].clickid
if (event) {
pagesX = event.screenX
pagesY = event.screenY
}
return replaceUrl(url, {
__DOWN_X__: pagesX,
__DOWN_Y__: pagesY,
__WIDTH__: document.body.clientWidth,
__HEIGHT__: document.body.clientHeight,
__UP_X__: pagesX,
__UP_Y__: pagesY,
__EVENT_TIME_START__: date,
__EVENT_TIME_END__: date,
__VIDEO_TIME__: times.duration,
__BEGIN_TIME__: 0,
__END_TIME__: times.duration,
__PLAY_FIRST_FRAME__: 1,
__PLAY_LAST_FRAME__: 1,
__SCENE__: 3,
__TYPE__: 1,
__BEHAVIOR__: 1,
__STATUS__: 0,
__CLICK_ID__: clickId
})
}
const report = {
isChanged: false,
// 加载完成
videoLoad(raw, times) {
const winLoadUrls = raw.metaGroup[0].winLoadUrls;
if (winLoadUrls) {
winLoadUrls.forEach(e => {
reportGet(dianxingReplace(raw, e, times, null));
})
}
},
// 开始播放（曝光), 0进度
videoPlayStart(raw, times) {
// 曝光
const winNoticeUrls = raw.metaGroup[0].winNoticeUrls;
if (winNoticeUrls) {
winNoticeUrls.forEach(e => {
reportGet(dianxingReplace(raw, e, times, null));
})
}
// 进度是0;
const track = raw.tracks
console.log('进度0')
track.forEach(e => {
if (e.type === 0) {
e.urls.forEach(url => {
reportGet(dianxingReplace(raw, url, times, null));
})
}
})
},
// 25进度
process25(raw, times) {
console.log('进度25')
const track = raw.tracks
track.forEach(e => {
if (e.type === 1) {
e.urls.forEach(url => {
reportGet(dianxingReplace(raw, url, times, null));
})
}
})
},
// 50进度
process50(raw, times) {
console.log('进度50')
const track = raw.tracks
track.forEach(e => {
if (e.type === 2) {
e.urls.forEach(url => {
reportGet(dianxingReplace(raw, url, times, null));
})
}
})
},
process75(raw, times) {
console.log('进度75')
const track = raw.tracks
track.forEach(e => {
if (e.type === 3) {
e.urls.forEach(url => {
reportGet(dianxingReplace(raw, url, times, null));
})
}
})
},
// 广告点击
async videoClick(raw, times, event) {
const winCNoticeUrls = raw.metaGroup[0].winCNoticeUrls;
if (winCNoticeUrls) {
winCNoticeUrls.forEach(e => {
reportGet(dianxingReplace(raw, e, times, event));
})
}
},
async changeUrl(raw, times, event) {
if (this.isChanged) {
return;
}
this.isChanged = true;
let {interactionType, protocolType, clickUrl} = raw.metaGroup[0];
if (interactionType === 2 && protocolType === 1) {
try {
const res = await window.fetch(dianxingReplace(raw, clickUrl, times, event));
let resJson: any = res.json();
if (resJson.data.dstlink) {
window.location.href = clickUrl;
}
this.isChanged = false;
} catch (err) {
this.isChanged = false;
console.log('替换地址请求出错');
}
} else {
this.isChanged = false;
window.location.href = clickUrl;
}
},
// 广告关闭
videoClose(raw, times, event) {
const winCloseUrls = raw.metaGroup[0].winCloseUrls;
if (winCloseUrls) {
winCloseUrls.forEach(e => {
reportGet(dianxingReplace(raw, e, times, event));
})
}
},
// 开始下载
async appDownload(raw, times, event) {
const winCloseUrls = raw.metaGroup[0].winCloseUrls;
if (winCloseUrls) {
winCloseUrls.forEach(e => {
reportGet(dianxingReplace(raw, e, times, event));
})
}
await this.changeUrl(raw, times, event)
},
// 播放完毕, 进度100.
videoPlayEnd(raw, times) {
const track = raw.tracks
console.log('进度100')
track.forEach(e => {
if (e.type === 4) {
e.urls.forEach(url => {
reportGet(dianxingReplace(raw, url, times, null));
})
}
})
// 激励完成
const winCompleteUrls = raw.metaGroup[0].winCompleteUrls
if (winCompleteUrls) {
winCompleteUrls.forEach(e => {
reportGet(dianxingReplace(raw, e, times, event));
})
}
},
}
export function resolveParams(raw) {
console.log(raw);
const ads = {
url: '',
name: '',
appIcon: '',
slogen: '',
};
const metaGroup = raw.metaGroup
if (metaGroup && metaGroup.length > 0) {
let videoRaw = metaGroup[0]
videoRaw.videoUrl && (ads.url = videoRaw.videoUrl);
videoRaw.brandName && (ads.name = videoRaw.brandName);
videoRaw.iconUrls && videoRaw.iconUrls.length > 0 && (ads.appIcon = videoRaw.iconUrls[0]);
videoRaw.descs && videoRaw.descs.length > 0 && (ads.slogen = videoRaw.descs[0]);
}
console.log(ads);
return ads;
}
export default {
getVideo,
report,
resolveParams,
}
\ No newline at end of file
egret/src/adVideo/utils.ts 0 → 100644
View file @ 225137c6
import MobileDetect from './video-core/mobile-detect';
function getCookie(key) {
var arr1 = document.cookie.split("; ");//由于cookie是通过一个分号+空格的形式串联起来的，所以这里需要先按分号空格截断,变成[name=Jack,pwd=123456,age=22]数组类型；
for (var i = 0; i < arr1.length; i++) {
var arr2 = arr1[i].split("=");//通过=截断，把name=Jack截断成[name,Jack]数组；
if (arr2[0] == key) {
return decodeURIComponent(arr2[1]);
}
}
return null
}
export const getUrl = (name) => {
var str = getCookie("dcustom");
if (str) {
//&分割
var arr = str.split("&");
for (var i = 0; i < arr.length; i++) {
if (arr[i].indexOf(name + "=") == 0) {
return arr[i].replace(name + "=", "") || '';
}
}
}
return '';
};
// 获取网络信息
export function getNetworkType(obj = {}) {
const ua = navigator.userAgent;
let networkStr = ua.match(/NetType\/\w+/) ? ua.match(/NetType\/\w+/)[0] : 'NetType/other';
networkStr = networkStr.toLowerCase().replace('nettype/', '');
let networkType;
switch (networkStr) {
case 'wifi':
networkType = 'wifi';
break;
case '4g':
networkType = '4g';
break;
case '3g':
networkType = '3g';
break;
case '3gnet':
networkType = '3g';
break;
case '2g':
networkType = '2g';
break;
default:
networkType = 'other';
}
if (obj[networkType]) {
return obj[networkType];
}
return networkType;
}
interface appInfo {
appId: string,
appPackage: string,
appName: string,
appVersion: string,
slotId: string,
ip: string,
connectionType: number,
operatorType: number
}
// 获取平台信息， app相关的，slotId , ip。
export function getAppInfo():Promise<appInfo> {
const tVideoSlotId = getUrl('tVideoSlotId');
return new Promise((resolve) => {
// window.fetch(`https://activity.tuiatest.cn/commercialloanv/common/config/video/get?slotId=${tVideoSlotId}`).then(res => {
// return res.json();
// }).then(res => {
// console.log(res);
// })
resolve({
appId: "ZG08HD",
appPackage: "com.test",
appName: "测试 APP",
appVersion: "1.1.0",
slotId: "test1030",
ip: "115.236.166.122",
connectionType: 4,
operatorType: 2
})
});
}
// 根据ip 生成唯一的值。
export function createUnique(ip) {
return ip + (+ new Date());
}
// ost (平台 1.安卓，2ios), 自行分析
// idfa(苹果唯一标示码)， 必须传递
// model(设备型号)， 优先传递
// osv（操作系统版本号), 优先传递
// imei(安卓平台的号码) 必须传递
// androidid(必须传递) 必须传递
// mac（mac 地址) 必须传递
// vendor(设备厂商) 优先传递
// brand(手机厂商) 有限传递
// imsi() 不做要求。
// ppi
// connt(网络状况) 优先传递
const reflectObj = {
wifi: 101,
'2g': 2,
'3g': 3,
'4g': 4,
'5g': 5,
other: 0
};
let defaultConfig;
export function getDefaultConfig() {
if (defaultConfig) return defaultConfig;
defaultConfig = {};
const md = new MobileDetect(window.navigator.userAgent);
if (md.os() === 'iOS') {
defaultConfig.ost = 2;
defaultConfig.idfa = getUrl('idfa');
defaultConfig.ppi = Math.min(window.devicePixelRatio, 3);
defaultConfig.model = getUrl('model') || md.versionStr('Mobile');
defaultConfig.osv = getUrl('osv') || md.versionStr('iPhone');
defaultConfig.imei = '';
defaultConfig.androidId = '';
defaultConfig.imsi = '';
} else {
defaultConfig.ost = 1;
defaultConfig.imei = getUrl('imei') || '866333026939494';
defaultConfig.ppi = 1;
defaultConfig.model = getUrl('model') || md.versionStr('Build');
defaultConfig.osv = getUrl('osv') || md.version('Android').toString();
defaultConfig.androidId = getUrl('androidid') || '';
defaultConfig.imsi = getUrl('imsi') || '';
defaultConfig.idfa = '';
}
defaultConfig.mac = getUrl('mac');
defaultConfig.sw = document.body.clientWidth;
defaultConfig.sh = document.body.clientHeight;
defaultConfig.vendor = getUrl('vendor') || md.phone();
defaultConfig.brand = getUrl('vendor') || md.phone();
return defaultConfig;
}
export function replaceUrl(url, replaceConfig) {
for (const i in replaceConfig) {
if (replaceConfig[i]) {
url = url.replace(i, replaceConfig[i]);
}
}
return url;
}
export const reportGet = (e) => {
const img = new Image();
img.src = e;
};
\ No newline at end of file
egret/src/adVideo/video-core/defaultVideoConfig.ts 100644 → 100755
View file @ 225137c6
export default { export default {
autoplay: false, autoplay: false,
controls: false, controls: false,
playsInline: true, playsInline: true,
preload: 'auto', preload: 'auto',
'x5-video-player-fullscreen': true, 'x5-video-player-fullscreen': true,
'x5-video-orientation': 'landscape|portrait', 'x5-video-orientation': 'landscape|portrait',
'x5-video-player-type': 'h5', 'x5-video-player-type': 'h5',
'x-webkit-airplay': 'allow', 'x-webkit-airplay': 'allow',
muted: true, muted: true,
crossorigin: 'anonymous' crossorigin: 'anonymous'
}; };
egret/src/adVideo/video-core/event.ts 100644 → 100755
View file @ 225137c6
class EventEmitter { class EventEmitter {
_events: {}; _events: {};
constructor() { constructor() {
this._events = {}; this._events = {};
} }
on(event, callback) { on(event, callback) {
const callbacks = this._events[event] || []; const callbacks = this._events[event] || [];
callbacks.push(callback); callbacks.push(callback);
this._events[event] = callbacks; this._events[event] = callbacks;
return this; return this;
} }
off(event, callback) { off(event, callback) {
const callbacks = this._events[event]; const callbacks = this._events[event];
this._events[event] = callbacks && callbacks.filter(fn => fn !== callback); this._events[event] = callbacks && callbacks.filter(fn => fn !== callback);
return this; return this;
} }
emit(...args) { emit(...args) {
const event = args[0]; const event = args[0];
const params = [].slice.call(args, 1); const params = [].slice.call(args, 1);
const callbacks = this._events[event]; const callbacks = this._events[event];
if (callbacks) { if (callbacks) {
callbacks.forEach(fn => fn.apply(this, params)); callbacks.forEach(fn => fn.apply(this, params));
} }
return this; return this;
} }
once(event, callback) { once(event, callback) {
const wrapFunc = (...args) => { const wrapFunc = (...args) => {
callback.apply(this, args); callback.apply(this, args);
this.off(event, wrapFunc); this.off(event, wrapFunc);
}; };
this.on(event, wrapFunc); this.on(event, wrapFunc);
return this; return this;
} }
removeAll() { removeAll() {
this._events = {}; this._events = {};
} }
} }
export default EventEmitter; export default EventEmitter;
egret/src/adVideo/video-core/index.less 100644 → 100755
View file @ 225137c6
.video-contanier { .video-contanier {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
overflow: hidden; overflow: hidden;
z-index: 10000; z-index: 10000;
left:0; left:0;
top: 0; top: 0;
background: black; background: red;
} }
.video-wrapper { .video-wrapper {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 0; z-index: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.video-instance { .video-instance {
z-index: 1; z-index: 1;
object-fit: contain; object-fit: contain;
object-position: 50% 50%; object-position: 50% 50%;
height: 0; height: 0;
flex:1; flex:1;
outline: none; outline: none;
} }
.video-inner-plugin { .video-inner-plugin {
}; };
.video-plugin { .video-plugin {
position: absolute; position: absolute;
} }
\ No newline at end of file
egret/src/adVideo/video-core/index.ts 100644 → 100755
View file @ 225137c6
import defaultVideoConfig from './defaultVideoConfig'; import defaultVideoConfig from './defaultVideoConfig';
import VideoPlugin from './plugins'; import VideoPlugin from './plugins';
import EventEmitter from './event'; import EventEmitter from './event';
import { videoEvent, videoProps } from './videoEvent'; import { videoEvent, videoProps } from './videoEvent';
const clone = (obj) => { const clone = (obj) => {
return JSON.parse(JSON.stringify(obj)); return JSON.parse(JSON.stringify(obj));
}; };
const plugins = []; const plugins = [];
class AdVideo { class AdVideo {
eventType: any[]; eventType: any[];
event: EventEmitter; event: EventEmitter;
$contanier: any; $contanier: any;
$video: HTMLVideoElement; $video: HTMLVideoElement;
$wrapper: HTMLDivElement; $wrapper: HTMLDivElement;
url: any; url: any;
videoCoinfg: any; videoCoinfg: any;
plugins: any[]; plugins: any[];
static install: (plugConfig: any) => void; static install: (plugConfig: any) => void;
constructor(config) { constructor(config) {
this.eventType = []; this.eventType = [];
this.event = new EventEmitter(); this.event = new EventEmitter();
this.initVideoConfig(config); this.initVideoConfig(config);
this.init(config); this.init(config);
} }
// 初始化容器 // 初始化容器
initVideoConfig(config) { initVideoConfig(config) {
if (!config.el) { if (!config.el) {
console.warn('player: no element'); console.warn('player: no element');
return; return;
}; };
this.event = new EventEmitter(); this.event = new EventEmitter();
this.$contanier = config.el; this.$contanier = config.el;
this.$contanier.classList.add('video-contanier'); this.$contanier.classList.add('video-contanier');
this.$video = document.createElement('video'); this.$video = document.createElement('video');
this.$wrapper = document.createElement('div'); this.$wrapper = document.createElement('div');
this.$wrapper.classList.add('video-wrapper'); this.$wrapper.classList.add('video-wrapper');
this.$video.classList.add('video-instance'); this.$video.classList.add('video-instance');
} }
// 初始化 // 初始化
init(config) { init(config) {
this.url = config.url || ''; this.url = config.url || '';
this.videoCoinfg = Object["assign"]( this.videoCoinfg = Object["assign"](
clone(defaultVideoConfig), clone(defaultVideoConfig),
config.videoConfig, config.videoConfig,
{ url: '' }); { url: '' });
for (const i in this.videoCoinfg) { for (const i in this.videoCoinfg) {
if (videoProps["findIndex"](e => e === i) > -1) { if (videoProps["findIndex"](e => e === i) > -1) {
this.$video[i] = this.videoCoinfg[i]; this.$video[i] = this.videoCoinfg[i];
} else { } else {
this.$video.setAttribute(i, this.videoCoinfg[i]); this.$video.setAttribute(i, this.videoCoinfg[i]);
} }
}; };
this.plugins = plugins || []; this.plugins = plugins || [];
this.plugins = this.plugins.map(e => { this.plugins = this.plugins.map(e => {
return new VideoPlugin(Object["assign"](e, { return new VideoPlugin(Object["assign"](e, {
$video: this.$video, $video: this.$video,
$contanier: this.$contanier, $contanier: this.$contanier,
$wrapper: this.$wrapper, $wrapper: this.$wrapper,
$player: this $player: this
})); }));
}); });
this.$wrapper.appendChild(this.$video); this.$wrapper.appendChild(this.$video);
this.$contanier.appendChild(this.$wrapper); this.$contanier.appendChild(this.$wrapper);
this.plugins.forEach(e => { this.plugins.forEach(e => {
e.created(); e.created();
}); });
this.$wrapper.appendChild(this.$video); this.$wrapper.appendChild(this.$video);
this.$contanier.appendChild(this.$wrapper); this.$contanier.appendChild(this.$wrapper);
this.plugins.forEach(e => { this.plugins.forEach(e => {
e.mounted(); e.mounted();
}); });
// 准备播放; // 准备播放;
if (this.url) { if (this.url) {
this.$video.src = config.url; this.$video.src = config.url;
} }
} }
// 初始化事件监听 // 初始化事件监听
on(i, fn) { on(i, fn) {
if (typeof i === 'string' && typeof fn === 'function') { if (typeof i === 'string' && typeof fn === 'function') {
const isNative = videoEvent["findIndex"](e => e === i) > -1; const isNative = videoEvent["findIndex"](e => e === i) > -1;
if (isNative && this.eventType["findIndex"](e => e === i) === -1) { if (isNative && this.eventType["findIndex"](e => e === i) === -1) {
this.eventType.push(i); this.eventType.push(i);
this.$video.addEventListener(i, (e) => { this.$video.addEventListener(i, (e) => {
this.event.emit(i, e); this.event.emit(i, e);
}); });
} }
this.event.on(i, fn); this.event.on(i, fn);
} }
} }
// 触发事件 // 触发事件
emit(...args) { emit(...args) {
const event = args[0]; const event = args[0];
// 不能触发原生事件。 // 不能触发原生事件。
if (videoEvent["findIndex"](e => e === event) > -1) { if (videoEvent["findIndex"](e => e === event) > -1) {
return; return;
} }
const params = [].slice.call(args, 1); const params = [].slice.call(args, 1);
this.event.emit(event, ...params); this.event.emit(event, ...params);
} }
// 加载视频 // 加载视频
load(url) { load(url) {
this.$video.src = url; this.$video.src = url;
} }
play() { play() {
if (this.$video && this.$video.play) { if (this.$video && this.$video.play) {
this.$video.play(); this.$video.play();
} }
} }
pause() { pause() {
if (this.$video) { if (this.$video) {
this.$video.pause(); this.$video.pause();
} }
} }
_removeAll() { _removeAll() {
this.event.removeAll(); this.event.removeAll();
} }
}; };
AdVideo.install = (plugConfig) => { AdVideo.install = (plugConfig) => {
plugins.push(plugConfig); plugins.push(plugConfig);
}; };
export default AdVideo; export default AdVideo;
egret/src/adVideo/video-core/mobile-detect.ts 100644 → 100755
View file @ 225137c6
File mode changed from 100644 to 100755
egret/src/adVideo/video-core/plugins.ts 100644 → 100755
View file @ 225137c6
import './index.less';
let nameId = 0; let nameId = 0;
class VideoPlugin { class VideoPlugin {
isAbstract: any; isAbstract: any;
isInner: any; isInner: any;
poinerEvents: any; poinerEvents: any;
configRaw: any; configRaw: any;
name: any; name: any;
$wrapper: any; $wrapper: any;
$video: any; $video: any;
$contanier: any; $contanier: any;
$player: any; $player: any;
el: HTMLDivElement; el: HTMLDivElement;
$wapper(arg0: any): any { $wapper(arg0: any): any {
throw new Error("Method not implemented."); throw new Error("Method not implemented.");
} }
_removed: any; _removed: any;
constructor(config) { constructor(config) {
this.isAbstract = config.isAbstract || false; this.isAbstract = config.isAbstract || false;
this.isInner = config.isInner || false; this.isInner = config.isInner || false;
this.poinerEvents = config.poinerEvents; this.poinerEvents = config.poinerEvents;
this.configRaw = config; this.configRaw = config;
nameId += 1; nameId += 1;
this.name = config.name || nameId; this.name = config.name || nameId;
// 当前video实例 // 当前video实例
this.$wrapper = config.$wrapper || ''; this.$wrapper = config.$wrapper || '';
this.$video = config.$video || ''; this.$video = config.$video || '';
this.$contanier = config.$contanier || ''; this.$contanier = config.$contanier || '';
this.$player = config.$player || ''; this.$player = config.$player || '';
this.proxyMethods(config); this.proxyMethods(config);
// 初始化事件 // 初始化事件
for (const i in config.event) { for (const i in config.event) {
if (i && typeof config.event[i] === 'function') { if (i && typeof config.event[i] === 'function') {
this.$player.on(i, config.event[i].bind(this)); this.$player.on(i, config.event[i].bind(this));
} }
} }
} }
// 代理methods // 代理methods
proxyMethods(config) { proxyMethods(config) {
if (config.methods) { if (config.methods) {
const that = this; const that = this;
for (const i in config.methods) { for (const i in config.methods) {
Object.defineProperty(this, i, { Object.defineProperty(this, i, {
get() { get() {
return config.methods[i].bind(that); return config.methods[i].bind(that);
} }
}); });
} }
} }
} }
// 创建 // 创建
created() { created() {
if (!this.isAbstract) { if (!this.isAbstract) {
this.el = document.createElement('div'); this.el = document.createElement('div');
console.log(this.poinerEvents); console.log(this.poinerEvents);
this.poinerEvents === 'none' && (this.el.style.pointerEvents = 'none'); this.poinerEvents === 'none' && (this.el.style.pointerEvents = 'none');
if (this.isInner) { if (this.isInner) {
this.el.classList.add('video-inner-plugin'); this.el.classList.add('video-inner-plugin');
} else { } else {
this.el.classList.add('video-plugin'); this.el.classList.add('video-plugin');
if (this.configRaw.zIndex) { if (this.configRaw.zIndex) {
this.el.style.zIndex = this.configRaw.zIndex; this.el.style.zIndex = this.configRaw.zIndex;
} else { } else {
this.el.style.zIndex = nameId+""; this.el.style.zIndex = nameId+"";
} }
} }
}; };
if (this.configRaw.created) { if (this.configRaw.created) {
this.configRaw.created.apply(this); this.configRaw.created.apply(this);
} }
} }
// 挂载完成 // 挂载完成
mounted() { mounted() {
if (this.isInner) { if (this.isInner) {
console.log(this.$wapper); console.log(this.$wapper);
this.$wrapper.appendChild(this.el); this.$wrapper.appendChild(this.el);
} else { } else {
this.$contanier.appendChild(this.el); this.$contanier.appendChild(this.el);
} }
if (this.configRaw.mounted) { if (this.configRaw.mounted) {
this.configRaw.mounted.apply(this); this.configRaw.mounted.apply(this);
} }
} }
// 移除 // 移除
remove() { remove() {
if (this._removed) { if (this._removed) {
return; return;
}; };
if (this.isAbstract) { if (this.isAbstract) {
return; return;
} }
if (this.isInner) { if (this.isInner) {
this.$wrapper.removeChild(this.el); this.$wrapper.removeChild(this.el);
this._removed = true; this._removed = true;
} else { } else {
console.log(this.el); console.log(this.el);
this.$contanier.removeChild(this.el); this.$contanier.removeChild(this.el);
this._removed = true; this._removed = true;
} }
} }
// 卸载 // 卸载
destory() { destory() {
this.el = null; this.el = null;
} }
}; };
export default VideoPlugin; export default VideoPlugin;
egret/src/adVideo/video-core/videoEvent.ts 100644 → 100755
View file @ 225137c6
const videoEvent = [ const videoEvent = [
'abort', // 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。 'abort', // 在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
'canplay', // 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。 'canplay', // 在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应CAN_PLAY的readyState。
'canplaythrough', // 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。 'canplaythrough', // 在媒体的readyState变为CAN_PLAY_THROUGH时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。注意：手动设置currentTime会使得firefox触发一次canplaythrough事件，其他浏览器或许不会如此。
'durationchange', // 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。 'durationchange', // 元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
'emptied', // 媒体被清空（初始化）时触发。 'emptied', // 媒体被清空（初始化）时触发。
'ended', // 播放结束时触发。 'ended', // 播放结束时触发。
'error', // 在发生错误时触发。元素的error属性会包含更多信息。参阅 HTMLMediaElement.error 获得详细信息。 'error', // 在发生错误时触发。元素的error属性会包含更多信息。参阅 HTMLMediaElement.error 获得详细信息。
'loadeddata', // 媒体的第一帧已经加载完毕。 'loadeddata', // 媒体的第一帧已经加载完毕。
'loadedmetadata', // 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。 'loadedmetadata', // 媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
'loadstart', // 在媒体开始加载时触发。 'loadstart', // 在媒体开始加载时触发。
'mozaudioavailable', // 当音频数据缓存并交给音频层处理时 'mozaudioavailable', // 当音频数据缓存并交给音频层处理时
'pause', // 播放暂停时触发。 'pause', // 播放暂停时触发。
'play', // 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。 'play', // 在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
'playing', // 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。 'playing', // 在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
'progress', // 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。 'progress', // 告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的buffered属性中获取到。
'ratechange', // 在回放速率变化时触发。 'ratechange', // 在回放速率变化时触发。
'seeked', // 在跳跃操作完成时触发。 'seeked', // 在跳跃操作完成时触发。
'seeking', // 在跳跃操作开始时触发。 'seeking', // 在跳跃操作开始时触发。
'stalled', // 在尝试获取媒体数据，但数据不可用时触发。 'stalled', // 在尝试获取媒体数据，但数据不可用时触发。
'suspend', // 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。 'suspend', // 在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
'timeupdate', // 元素的currentTime属性表示的时间已经改变。 'timeupdate', // 元素的currentTime属性表示的时间已经改变。
'volumechange', // 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。 'volumechange', // 在音频音量改变时触发（既可以是volume属性改变，也可以是muted属性改变）.。
'waiting' // 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。 'waiting' // 在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。
]; ];
const videoProps = [ const videoProps = [
'autoplay', 'autoplay',
'controls', 'controls',
'height', 'height',
'loop', 'loop',
'muted', 'muted',
'poster', 'poster',
'preload', 'preload',
'src', 'src',
'width', 'width',
'crossorigin' 'crossorigin'
]; ];
export { export {
videoEvent, videoEvent,
videoProps videoProps
}; };
egret/src/adVideo/video-core/videoPlugin/eventPlugin/index.js 100644 → 100755
View file @ 225137c6
File mode changed from 100644 to 100755
egret/src/adVideo/video-core/videoPlugin/footerPagePlugin/index.less deleted 100644 → 0
View file @ 88148681
.video-footer-wrapper {
height: 152px;
display: flex;
align-items: center;
padding: 0 20px;
z-index: 999;
justify-content: space-between;
opacity:0.95;
background: white;
.app-content {
display: flex;
flex-direction: row;
align-items: center;
}
.app-logo {
width: 125px;
height: 125px;
border-radius: 20px;
background-size: contain;
background-repeat: no-repeat;
}
.app-desc {
padding-left: 20px;
}
.app-name {
font-size: 34px;
color: block;
font-weight: 600;
}
.app-comment {
display: flex;
flex-direction: row;
margin-top: 10px;
align-items: center;
}
.app-comment-num {
font-size: 26px;
}
.app-star-num {
display: flex;
align-items: center;
flex-direction: row;
margin-right: 10px;
}
.app-star-icon {
width: 35px;
height: 35px;
background-size: contain;
background-repeat: no-repeat;
}
.app-star-yellow {
background-image: url('/dafuweng/star-y.png');
}
.app-star-gray {
background-image: url('/dafuweng/star-g.png')
}
.app-star-half {
background-image: url('/dafuweng/star-half.png');
}
.app-button {
font-size: 32px;
background: #4A90E2;
padding: 20px 40px;
text-align: center;
color: white;
border-radius: 4px;
}
}
egret/src/adVideo/video-core/videoPlugin/footerPagePlugin/index.ts 100644 → 100755
View file @ 225137c6
import './index.less';
const padNum = (num) => {
const padNum = (num) => { if (typeof num === 'number') {
if (typeof num === 'number') { return num.toLocaleString();
return num.toLocaleString(); } else {
} else { return num;
return num; }
} };
};
export default {
export default { name: 'footer-page',
name: 'footer-page', isInner: true,
isInner: true, created() {
created() { this.el.classList.add('video-footer-wrapper');
this.el.classList.add('video-footer-wrapper'); this.el.innerHTML = `
this.el.innerHTML = ` <div class="app-content">
<div class="app-content"> <div class="app-logo"></div>
<div class="app-logo"></div> <div class="app-desc">
<div class="app-desc"> <div class="app-name"></div>
<div class="app-name"></div> <div class="app-comment">
<div class="app-comment"> <div class="app-star-num"></div>
<div class="app-star-num"></div> <div class="app-comment-num">个评分</div>
<div class="app-comment-num">个评分</div> </div>
</div> </div>
</div> </div>
</div> <div class="app-button"></div>
<div class="app-button"></div> `;
`; this.appNameEl = this.el.querySelector('.app-name');
this.appNameEl = this.el.querySelector('.app-name'); this.appCommentNumEl = this.el.querySelector('.app-comment-num');
this.appCommentNumEl = this.el.querySelector('.app-comment-num'); this.appLogoEl = this.el.querySelector('.app-logo');
this.appLogoEl = this.el.querySelector('.app-logo'); this.appButtonEl = this.el.querySelector('.app-button');
this.appButtonEl = this.el.querySelector('.app-button'); this.appIcon = this.el.querySelector('.app-logo');
this.appIcon = this.el.querySelector('.app-logo'); this.starNumEl = this.el.querySelector('.app-star-num');
this.starNumEl = this.el.querySelector('.app-star-num'); this.el.addEventListener('click', (e) => {
this.el.addEventListener('click', (e) => { if (e.target === this.appButton) {
if (e.target === this.appButton) { this.$player.event.emit('$footerPageClick', e);
this.$player.event.emit('$footerPageClick', e); this.$player.event.emit('$footerPageButtonClick', e);
this.$player.event.emit('$footerPageButtonClick', e); } else {
} else { this.$player.event.emit('$footerPageClick', e);
this.$player.event.emit('$footerPageClick', e); }
} });
}); },
}, methods: {
methods: { renderStarNum(num) {
renderStarNum(num) { let dom = '';
let dom = ''; let renderNum = 5;
let renderNum = 5; while (renderNum > 0) {
while (renderNum > 0) { if (num >= 1) {
if (num >= 1) { dom += '<div class="app-star-yellow app-star-icon"></div>';
dom += '<div class="app-star-yellow app-star-icon"></div>'; } else if (num === 0.5) {
} else if (num === 0.5) { dom += '<div class="app-star-half app-star-icon"></div>';
dom += '<div class="app-star-half app-star-icon"></div>'; } else {
} else { dom += '<div class="app-star-gray app-star-icon"></div>';
dom += '<div class="app-star-gray app-star-icon"></div>'; }
} renderNum -= 1;
renderNum -= 1; num -= 1;
num -= 1; }
} console.log(dom);
console.log(dom); this.starNumEl.innerHTML = dom;
this.starNumEl.innerHTML = dom; },
}, hide() {
hide() { this.el.style.display = 'none';
this.el.style.display = 'none'; },
}, show() {
show() { this.el.style.display = 'flex';
this.el.style.display = 'flex'; }
} },
}, event: {
event: { $footerPageChangeApp({ name, commentNum, starNum, appIcon, buttonText }, show = true) {
$footerPageChangeApp({ name, commentNum, starNum, appIcon, buttonText }, show = true) { if (!show) {
if (!show) { console.log('hidehide');
console.log('hidehide'); this.hide();
this.hide(); return;
return; } else {
} else { this.show();
this.show(); }
} if (name) {
if (name) { console.log(name);
console.log(name); this.appNameEl.innerText = name;
this.appNameEl.innerText = name; };
}; if (commentNum) {
if (commentNum) { this.appCommentNumEl.innerText = `${padNum(commentNum)}个评分`;
this.appCommentNumEl.innerText = `${padNum(commentNum)}个评分`; }
} if (typeof starNum === 'number') {
if (typeof starNum === 'number') { this.renderStarNum(starNum);
this.renderStarNum(starNum); };
}; if (buttonText) {
if (buttonText) { this.appButtonEl.innerText = buttonText;
this.appButtonEl.innerText = buttonText; }
} if (appIcon) {
if (appIcon) { this.appIcon.style.backgroundImage = `url(${appIcon})`;
this.appIcon.style.backgroundImage = `url(${appIcon})`; }
} }
} }
} };
};
egret/src/adVideo/video-core/videoPlugin/landPagePlugin/index.less deleted 100644 → 0
View file @ 88148681
.video-land-page-content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
}
.app-close {
position: absolute;
width: 5.6vw;
height: 3.1vh;
top: 10.7vw;
right: 3.75vh;
}
.app-info-wrap {
padding: 3vh 0;
box-sizing: border-box;
width: 84vw;
height: 40vh;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.app-logo {
width: 18.7vw;
margin-top: 4vh;
height: 10.5vh;
background-size: 100%;
}
.app-name {
font-size: 24px;
font-weight: 400;
color: rgb(70, 63, 63);
line-height: 3.4vh;
text-align: center;
margin-top: 3vh;
}
.app-button {
width: 75.2vw;
height: 6.9vh;
margin: 4vh;
background: rgba(110, 166, 232, 1);
border-radius: 4px;
font-size: 17px;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
\ No newline at end of file
egret/src/adVideo/video-core/videoPlugin/landPagePlugin/index.ts 100644 → 100755
View file @ 225137c6
import './index.less';
const padNum = (num) => {
const padNum = (num) => { if (typeof num === 'number') {
if (typeof num === 'number') { return num.toLocaleString();
return num.toLocaleString(); } else {
} else { return num;
return num; }
} };
}; export default {
export default { name: 'landPage',
name: 'landPage', zIndex: 10,
zIndex: 10, created() {
created() { this.el.classList.add('video-land-page');
this.el.classList.add('video-land-page'); this.el.innerHTML = `
this.el.innerHTML = ` <div class="video-land-page-content">
<div class="video-land-page-content"> <div class="app-info-wrap">
<img class="app-close" <div class="app-logo"></div>
src="data:image/png;base64,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"> <div class="app-name"></div>
</img> <div class="app-star-num"></div>
<div class="app-info-wrap"> <div class="app-comment">
<div class="app-logo"></div> <div class="app-person-icon"></div>
<div class="app-name"></div> <div class="app-comment-num"></div>
<div class="app-tips">新人下载立领60元现金礼包</div> </div>
<div class="app-button"></div> <div class="app-button"></div>
<div class="app-download-num"></div> </div>
</div> </div>
</div> `;
`; this.appCommentNumEl = this.el.querySelector('.app-comment-num');
this.appNameEl = this.el.querySelector('.app-name'); this.appNameEl = this.el.querySelector('.app-name');
this.appClose = this.el.querySelector(".app-close"); this.appClose = this.el.querySelector(".app-close");
this.appButtonEl = this.el.querySelector('.app-button'); this.appButtonEl = this.el.querySelector('.app-button');
this.appIcon = this.el.querySelector('.app-logo'); this.appIcon = this.el.querySelector('.app-logo');
this.appDownloadNum = this.el.querySelector('.app-download-num'); this.starNumEl = this.el.querySelector('.app-star-num');
this.el.addEventListener('click', (e) => { this.el.addEventListener('click', (e) => {
if (e.target === this.appButton) { if (e.target === this.appButton) {
this.$player.event.emit('$footerPageButtonClick'); this.$player.event.emit('$footerPageButtonClick');
} else if (e.target === this.appClose) { } else if (e.target === this.appClose) {
this.hide(); this.hide();
} else { } else {
this.$player.event.emit('$footerPageClick'); this.$player.event.emit('$footerPageClick', e);
} }
}); });
this.hide(); this.hide();
}, },
methods: { methods: {
hide() { hide() {
this.el.style.display = 'none'; this.el.style.display = 'none';
}, },
show() { show() {
this.el.style.display = 'block'; this.el.style.display = 'block';
} },
}, renderStarNum(num) {
event: { let dom = '';
$landPageChangeApp({ name, appIcon, buttonText, donloadNum }, show = true) { let renderNum = 5;
if (!show) { while (renderNum > 0) {
this.hide(); if (num >= 1) {
return; dom += '<div class="app-star-yellow app-star-icon"></div>';
} else { } else if (num === 0.5) {
this.show(); dom += '<div class="app-star-half app-star-icon"></div>';
} } else {
if (name) { dom += '<div class="app-star-gray app-star-icon"></div>';
console.log(name); }
this.appNameEl.innerText = name; renderNum -= 1;
}; num -= 1;
if (donloadNum) { }
this.appDownloadNum.innerText = `今天有${donloadNum}人已下载`; console.log(dom);
} this.starNumEl.innerHTML = dom;
if (buttonText) { },
this.appButtonEl.innerText = buttonText; },
} event: {
if (appIcon) { $landPageChangeApp({ name, appIcon, buttonText, commentNum, starNum }, show = true) {
this.appIcon.style.backgroundImage = `url(${appIcon})`; if (!show) {
} this.hide();
}, return;
ended() { } else {
this.show(); this.show();
}, }
$videoReset() { if (name) {
this.hide(); console.log(name);
} this.appNameEl.innerText = name;
} };
}; if (name) {
console.log(name);
this.appNameEl.innerText = name;
};
if (commentNum) {
this.appCommentNumEl.innerText = `${padNum(commentNum)}个评分`;
}
if (typeof starNum === 'number') {
this.renderStarNum(starNum);
};
if (buttonText) {
this.appButtonEl.innerText = buttonText;
}
if (appIcon) {
this.appIcon.style.backgroundImage = `url(${appIcon})`;
}
},
ended() {
this.show();
},
$videoReset() {
this.hide();
}
}
};
egret/src/adVideo/video-core/videoPlugin/loadingPlugin/index.less 100644 → 100755
View file @ 225137c6
.video-loading { .video-loading {
background: url('/dafuweng/viewfile.gif') no-repeat; background: url('/dafuweng/viewfile.gif') no-repeat;
background-size: contain; background-size: contain;
background-color:black; background-color:black;
width: 100%; width: 100%;
height: 100%; height: 100%;
left:0; left:0;
top:0; top:0;
} }
\ No newline at end of file
egret/src/adVideo/video-core/videoPlugin/loadingPlugin/index.ts 100644 → 100755
View file @ 225137c6
import './index.less';
const loadingPlugin = {
const loadingPlugin = { name: 'loadingPlugin',
name: 'loadingPlugin', zIndex: 2,
zIndex: 2, created() {
created() { this.el.classList.add('video-loading');
this.el.classList.add('video-loading'); },
}, methods: {
methods: { app() {
app() { console.log(this);
console.log(this); }
} },
},
event: {
event: { canplay() {
canplay() { console.log('可以播放了');
console.log('可以播放了'); this.el.style.display = 'none';
this.el.style.display = 'none'; },
}, $videoReset() {
$videoReset() { this.el.style.display = 'block';
this.el.style.display = 'block'; }
} }
} };
};
export default loadingPlugin;
export default loadingPlugin;
egret/src/adVideo/video-core/videoPlugin/videoControl/index.less 100644 → 100755
View file @ 225137c6
.none { .none {
opacity: 0; opacity: 0;
} }
.pointEvent { .pointEvent {
pointer-events: auto; pointer-events: auto;
} }
.video-control { .video-control {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
left:0; left:0;
top:0; top:0;
} }
.video-voice { .video-voice {
width: 60px; width: 60px;
height: 60px; height: 60px;
position: absolute; position: absolute;
right: 40px; right: 40px;
bottom: 180px; bottom: 180px;
.none; .none;
.pointEvent; .pointEvent;
} }
.video-control-muted { .video-control-muted {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background:url('/dafuweng/muted.png') no-repeat; background:url('/dafuweng/muted.png') no-repeat;
background-size: contain; background-size: contain;
display: none; display: none;
.pointEvent; .pointEvent;
} }
.video-control-voice { .video-control-voice {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background:url('/dafuweng/voice.png') no-repeat; background:url('/dafuweng/voice.png') no-repeat;
background-size: contain; background-size: contain;
display: none; display: none;
.pointEvent; .pointEvent;
} }
.video-close { .video-close {
position: absolute; position: absolute;
right: 40px; right: 40px;
top: 80px; top: 80px;
width: 60px; width: 60px;
height: 60px; height: 60px;
background: url('/dafuweng/close.png') no-repeat; background: url('/dafuweng/close.png') no-repeat;
background-size: contain; background-size: contain;
.none; .none;
.pointEvent; .pointEvent;
} }
.video-count-down { .video-count-down {
position: absolute; position: absolute;
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 100%; border-radius: 100%;
background:gray; background:gray;
top:80px; top:80px;
left: 40px; left: 40px;
display: none; display: none;
color: white; color: white;
font-size: 32px; font-size: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.none; .none;
.pointEvent; .pointEvent;
} }
\ No newline at end of file
egret/src/adVideo/video-core/videoPlugin/videoControl/index.ts 100644 → 100755
View file @ 225137c6
import './index.less';
class VideoControl { class VideoControl {
wrapperEl: any; wrapperEl: any;
el: HTMLDivElement; el: HTMLDivElement;
$player: any; $player: any;
$video: any; $video: any;
$wrapper: any; $wrapper: any;
$contanier: any; $contanier: any;
constructor(config) { constructor(config) {
this.wrapperEl = config.el; this.wrapperEl = config.el;
this.el = document.createElement('div'); this.el = document.createElement('div');
this.wrapperEl.appendChild(this.el); this.wrapperEl.appendChild(this.el);
this.$player = config.$player; this.$player = config.$player;
this.$video = config.$video; this.$video = config.$video;
this.$wrapper = config.$wrapper; this.$wrapper = config.$wrapper;
this.$contanier = config.$contanier; this.$contanier = config.$contanier;
this.el.addEventListener('click', () => { this.el.addEventListener('click', () => {
this.click(); this.click();
}); });
} }
// 挂载 // 挂载
mount() { mount() {
this.wrapperEl.appendChild(this.el); this.wrapperEl.appendChild(this.el);
} }
// 展示 // 展示
show() { show() {
this.el.style.opacity = 1+""; this.el.style.opacity = 1+"";
} }
// 隐藏 // 隐藏
hide() { hide() {
this.el.style.opacity = 0+""; this.el.style.opacity = 0+"";
} }
// 点击 // 点击
click() { click() {
console.log('我被点击了'); console.log('我被点击了');
} }
}; };
class MutedControl extends VideoControl { class MutedControl extends VideoControl {
mutedEl: HTMLDivElement; mutedEl: HTMLDivElement;
voiceEl: HTMLDivElement; voiceEl: HTMLDivElement;
constructor(config) { constructor(config) {
super(config); super(config);
this.mutedEl = document.createElement('div'); this.mutedEl = document.createElement('div');
this.mutedEl.classList.add('video-control-muted'); this.mutedEl.classList.add('video-control-muted');
this.voiceEl = document.createElement('div'); this.voiceEl = document.createElement('div');
this.voiceEl.classList.add('video-control-voice'); this.voiceEl.classList.add('video-control-voice');
this.el.appendChild(this.mutedEl); this.el.appendChild(this.mutedEl);
this.el.appendChild(this.voiceEl); this.el.appendChild(this.voiceEl);
this.el.classList.add('video-voice'); this.el.classList.add('video-voice');
super.mount(); super.mount();
} }
show() { show() {
super.show(); super.show();
if (this.$video.muted) { if (this.$video.muted) {
this.showMuted(); this.showMuted();
} else { } else {
this.showVoice(); this.showVoice();
} }
} }
// 展示音量 // 展示音量
showVoice() { showVoice() {
this.voiceEl.style.display = 'block'; this.voiceEl.style.display = 'block';
this.mutedEl.style.display = 'none'; this.mutedEl.style.display = 'none';
} }
// 展示静音 // 展示静音
showMuted() { showMuted() {
this.mutedEl.style.display = 'block'; this.mutedEl.style.display = 'block';
this.voiceEl.style.display = ''; this.voiceEl.style.display = '';
} }
// 切换音量 // 切换音量
click() { click() {
if (this.$video.muted) { if (this.$video.muted) {
this.$video.muted = false; this.$video.muted = false;
this.showVoice(); this.showVoice();
} else { } else {
this.$video.muted = true; this.$video.muted = true;
this.showMuted(); this.showMuted();
} }
} }
}; };
class CloseControl extends VideoControl { class CloseControl extends VideoControl {
constructor(config) { constructor(config) {
super(config); super(config);
this.el.classList.add('video-close'); this.el.classList.add('video-close');
super.mount(); super.mount();
} }
click() { click() {
console.log(this); console.log(this);
this.$player.event.emit('$videoClose'); this.$player.event.emit('$videoClose');
} }
}; };
class CountDownControl extends VideoControl { class CountDownControl extends VideoControl {
constructor(config) { constructor(config) {
super(config); super(config);
this.el.classList.add('video-count-down'); this.el.classList.add('video-count-down');
super.mount(); super.mount();
} }
// 改变节奏 // 改变节奏
changeText(text) { changeText(text) {
this.el.innerText = text; this.el.innerText = text;
} }
}; };
export default { export default {
name: 'video-control', name: 'video-control',
zIndex: 3, zIndex: 3,
poinerEvents: 'none', poinerEvents: 'none',
created() { created() {
this.el.classList.add('video-control'); this.el.classList.add('video-control');
const config = { const config = {
el: this.el, el: this.el,
$video: this.$video, $video: this.$video,
$wrapper: this.$wrapper, $wrapper: this.$wrapper,
$contanier: this.$contanier, $contanier: this.$contanier,
$player: this.$player $player: this.$player
}; };
this.mutedControl = new MutedControl(config); this.mutedControl = new MutedControl(config);
this.closeControl = new CloseControl(config); this.closeControl = new CloseControl(config);
this.countDownControl = new CountDownControl(config); this.countDownControl = new CountDownControl(config);
}, },
event: { event: {
canplay() { canplay() {
this.mutedControl.show(); this.mutedControl.show();
const duration = Math.floor(this.$video.duration); const duration = Math.floor(this.$video.duration);
this.countDownControl.changeText(duration); this.countDownControl.changeText(duration);
this.countDownControl.show(); this.countDownControl.show();
}, },
$closeShow() { $closeShow() {
this.closeControl.show(); this.closeControl.show();
}, },
ended() { ended() {
this.closeControl.show(); this.closeControl.show();
}, },
timeupdate() { timeupdate() {
console.log(this.$video.currentTime); console.log(this.$video.currentTime);
const time = Math.floor(this.$video.duration - this.$video.currentTime); const time = Math.floor(this.$video.duration - this.$video.currentTime);
if (isNaN(time)) { if (isNaN(time)) {
this.countDownControl.hide(); this.countDownControl.hide();
} else { } else {
this.countDownControl.show(); this.countDownControl.show();
} }
this.countDownControl.changeText(time); this.countDownControl.changeText(time);
this.$player.event.emit('$process', Math.floor(this.$video.currentTime / this.$video.duration) * 100); this.$player.event.emit('$process', this.$video.currentTime / this.$video.duration * 100);
if (time === 0) { if (time === 0) {
this.countDownControl.hide(); this.countDownControl.hide();
} }
}, },
$videoReset() { $videoReset() {
this.closeControl.hide(); this.closeControl.hide();
this.countDownControl.hide(); this.countDownControl.hide();
this.mutedControl.hide(); this.mutedControl.hide();
} }
} }
}; };
egret/src/myVideo/videoCtrl.ts
View file @ 225137c6
...@@ -3,34 +3,56 @@ import { getWuhanAds, getVideoIns } from "./Video"; ...@@ -3,34 +3,56 @@ import { getWuhanAds, getVideoIns } from "./Video";
import { NetManager } from "../../libs/tw/manager/NetManager"; import { NetManager } from "../../libs/tw/manager/NetManager";
import { showToast } from "../../libs/new_wx/ctrls/toastCtrl"; import { showToast } from "../../libs/new_wx/ctrls/toastCtrl";
import layers from "../../libs/new_wx/views/layers"; import layers from "../../libs/new_wx/views/layers";
import MyAdvideo from "../adVideo/adVideo";
let videoIns: MyAdvideo;
let videoContanier = document.querySelector('#video-contanier');
export const handleVideo = ( export const handleVideo = (
returnCallback: (s: boolean) => void, returnCallback: (s: boolean) => void,
completeCallback: Function, completeCallback: Function,
slotid: string, slotid: string,
) => { ) => {
Loading.instace.show(); Loading.instace.show();
if (!videoIns) {
videoIns = new MyAdvideo({
el: videoContanier
})
}
videoIns.getVideo().then((res) => {
Loading.instace.hide();
if (res) {
videoIns.play().then(() => {
completeCallback();
})
videoIns.player.event.once('$videoClose', () => {
returnCallback(true);
})
} else {
showToast("广告准备中，请稍后再试");
}
});
//发激励视频接口获取素材 //发激励视频接口获取素材
getWuhanAds( // getWuhanAds(
(s, res) => { // (s, res) => {
Loading.instace.hide();
if (s && // if (s &&
res.data.errcode == "0" && // res.data.errcode == "0" &&
res.data.ad && // res.data.ad &&
res.data.ad[0] && // res.data.ad[0] &&
res.data.ad[0].rewardvideo // res.data.ad[0].rewardvideo
) { // ) {
var rewardvideo = res.data.ad[0]; // var rewardvideo = res.data.ad[0];
var videoIns = getVideoIns(rewardvideo); // var videoIns = getVideoIns(rewardvideo);
videoIns.returnCallback = returnCallback; // videoIns.returnCallback = returnCallback;
videoIns.completeCallback = completeCallback; // videoIns.completeCallback = completeCallback;
layers.videoLayer.addChild(videoIns) // console.log(layers);
//app方法 // console.log(videoContanier);
if (window["helpbridge"] && window["helpbridge"].adShowing) window["helpbridge"].adShowing(); // layers.videoLayer.addChild(videoIns)
} else { // //app方法
showToast("广告准备中，请稍后再试"); // if (window["helpbridge"] && window["helpbridge"].adShowing) window["helpbridge"].adShowing();
} // } else {
}, // showToast("广告准备中，请稍后再试");
slotid // }
) // },
// slotid
// )
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment