Commit 225137c6 authored by liupengfei's avatar liupengfei

video

parent 88148681
.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
...@@ -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>
......
This diff is collapsed.
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
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
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
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;
...@@ -30,3 +30,4 @@ ...@@ -30,3 +30,4 @@
.video-plugin { .video-plugin {
position: absolute; position: absolute;
} }
File mode changed from 100644 to 100755
import './index.less';
let nameId = 0; let nameId = 0;
class VideoPlugin { class VideoPlugin {
isAbstract: any; isAbstract: any;
......
File mode changed from 100644 to 100755
.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;
}
}
import './index.less';
const padNum = (num) => { const padNum = (num) => {
if (typeof num === 'number') { if (typeof num === 'number') {
......
.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
import './index.less';
const padNum = (num) => { const padNum = (num) => {
if (typeof num === 'number') { if (typeof num === 'number') {
...@@ -14,30 +13,31 @@ export default { ...@@ -14,30 +13,31 @@ export default {
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">
<img class="app-close"
src="data:image/png;base64,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">
</img>
<div class="app-info-wrap"> <div class="app-info-wrap">
<div class="app-logo"></div> <div class="app-logo"></div>
<div class="app-name"></div> <div class="app-name"></div>
<div class="app-tips">新人下载立领60元现金礼包</div> <div class="app-star-num"></div>
<div class="app-comment">
<div class="app-person-icon"></div>
<div class="app-comment-num"></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();
...@@ -48,10 +48,27 @@ export default { ...@@ -48,10 +48,27 @@ export default {
}, },
show() { show() {
this.el.style.display = 'block'; this.el.style.display = 'block';
},
renderStarNum(num) {
let dom = '';
let renderNum = 5;
while (renderNum > 0) {
if (num >= 1) {
dom += '<div class="app-star-yellow app-star-icon"></div>';
} else if (num === 0.5) {
dom += '<div class="app-star-half app-star-icon"></div>';
} else {
dom += '<div class="app-star-gray app-star-icon"></div>';
} }
renderNum -= 1;
num -= 1;
}
console.log(dom);
this.starNumEl.innerHTML = dom;
},
}, },
event: { event: {
$landPageChangeApp({ name, appIcon, buttonText, donloadNum }, show = true) { $landPageChangeApp({ name, appIcon, buttonText, commentNum, starNum }, show = true) {
if (!show) { if (!show) {
this.hide(); this.hide();
return; return;
...@@ -62,9 +79,16 @@ export default { ...@@ -62,9 +79,16 @@ export default {
console.log(name); console.log(name);
this.appNameEl.innerText = name; this.appNameEl.innerText = name;
}; };
if (donloadNum) { if (name) {
this.appDownloadNum.innerText = `今天有${donloadNum}人已下载`; console.log(name);
this.appNameEl.innerText = name;
};
if (commentNum) {
this.appCommentNumEl.innerText = `${padNum(commentNum)}个评分`;
} }
if (typeof starNum === 'number') {
this.renderStarNum(starNum);
};
if (buttonText) { if (buttonText) {
this.appButtonEl.innerText = buttonText; this.appButtonEl.innerText = buttonText;
} }
......
import './index.less';
const loadingPlugin = { const loadingPlugin = {
name: 'loadingPlugin', name: 'loadingPlugin',
......
import './index.less';
class VideoControl { class VideoControl {
wrapperEl: any; wrapperEl: any;
el: HTMLDivElement; el: HTMLDivElement;
...@@ -153,7 +153,7 @@ export default { ...@@ -153,7 +153,7 @@ export default {
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();
} }
......
...@@ -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) {
getWuhanAds( videoIns = new MyAdvideo({
(s, res) => { el: videoContanier
})
}
videoIns.getVideo().then((res) => {
Loading.instace.hide(); Loading.instace.hide();
if (s && if (res) {
res.data.errcode == "0" && videoIns.play().then(() => {
res.data.ad && completeCallback();
res.data.ad[0] && })
res.data.ad[0].rewardvideo videoIns.player.event.once('$videoClose', () => {
) { returnCallback(true);
var rewardvideo = res.data.ad[0]; })
var videoIns = getVideoIns(rewardvideo);
videoIns.returnCallback = returnCallback;
videoIns.completeCallback = completeCallback;
layers.videoLayer.addChild(videoIns)
//app方法
if (window["helpbridge"] && window["helpbridge"].adShowing) window["helpbridge"].adShowing();
} else { } else {
showToast("广告准备中,请稍后再试"); showToast("广告准备中,请稍后再试");
} }
}, });
slotid //发激励视频接口获取素材
) // getWuhanAds(
// (s, res) => {
// if (s &&
// res.data.errcode == "0" &&
// res.data.ad &&
// res.data.ad[0] &&
// res.data.ad[0].rewardvideo
// ) {
// var rewardvideo = res.data.ad[0];
// var videoIns = getVideoIns(rewardvideo);
// videoIns.returnCallback = returnCallback;
// videoIns.completeCallback = completeCallback;
// console.log(layers);
// console.log(videoContanier);
// layers.videoLayer.addChild(videoIns)
// //app方法
// if (window["helpbridge"] && window["helpbridge"].adShowing) window["helpbridge"].adShowing();
// } else {
// showToast("广告准备中,请稍后再试");
// }
// },
// 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