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>
......
...@@ -3,219 +3,37 @@ import loadingPlugin from './video-core/videoPlugin/loadingPlugin/index'; ...@@ -3,219 +3,37 @@ import loadingPlugin from './video-core/videoPlugin/loadingPlugin/index';
import videoControlPlugin from './video-core/videoPlugin/videoControl/index'; import videoControlPlugin from './video-core/videoPlugin/videoControl/index';
import footerPagePlugin from './video-core/videoPlugin/footerPagePlugin/index'; import footerPagePlugin from './video-core/videoPlugin/footerPagePlugin/index';
import landPagePlugin from './video-core/videoPlugin/landPagePlugin/index'; import landPagePlugin from './video-core/videoPlugin/landPagePlugin/index';
import MobileDetect from './video-core/mobile-detect'; import DianXing from './dianxiangVideo';
const getUrlParameter = (name, path = window.location.href) => {
const result =
decodeURIComponent(
(new RegExp('[?|&]' + name + '=([^&;]+?)(&|#|;|$)').exec(path) || [undefined, ''])[1].replace(/\+/g, '%20')
) || null;
return result;
};
const reflectObj = {
wifi: 1,
'2g': 2,
'3g': 3,
'4g': 4,
'5g': 5,
other: 6
};
function getNetworkType(obj = reflectObj) {
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;
}
const reportGet = (e) => {
const img = new Image();
img.src = e;
};
AdVideo.install(loadingPlugin); AdVideo.install(loadingPlugin);
AdVideo.install(videoControlPlugin); AdVideo.install(videoControlPlugin);
AdVideo.install(footerPagePlugin); AdVideo.install(footerPagePlugin);
AdVideo.install(landPagePlugin); AdVideo.install(landPagePlugin);
function replaceUrl(url, replaceConfig) {
for (const i in replaceConfig) {
if (replaceConfig[i]) {
url = url.replace(i, replaceConfig[i]);
}
}
return url;
}
function replaceMacro1(url, mouseE) {
const x = mouseE.screenX;
const y = mouseE.screenY;
const point = JSON.stringify({
down_x: x,
down_y: y,
up_x: x,
up_y: y
});
const encodeP = encodeURI(point);
return replaceUrl(url, {
__ABSOLUTE_COORD__: point,
__RELATIVE_COORD__: point,
'{ABSOLUTE_COORD}': encodeP,
'{RELATIVE_COORD}': encodeP,
'{UUID}': defaultConfig.imei || defaultConfig.idfa,
});
}
function replaceMacro2(url, mouseE,
{ responseTime = '', readyTime = '', showTime = '', clickTime = '' }) {
const x = mouseE.screenX;
const y = mouseE.screenY;
return replaceUrl(url, {
__RESPONSE_TIME__: responseTime,
__READY_TIME__: readyTime,
__SHOW_TIME__: showTime,
__CLICK_TIME__: clickTime,
__DOWN_X__: x,
__DOWN_Y__: y,
__UP_X__: x,
__UP_Y__: y,
__WIDTH__: x,
__HEIGHT__: y
});
}
const getUrl = (name) => {
return getUrlParameter('_ext_' + name);
};
// const contanier = document.querySelector('.ad-video-player');
// const player = new AdVideo({
// el: contanier
// });
// player.emit('$footerPageChangeApp', {
// name: '测试app',
// appIcon: 'https://yun.dui88.com/ecb_v2_pdd2_icon.png',
// starNum: 4,
// commentNum: 6800,
// buttonText: '测试按钮'
// });
// player.emit('$landPageChangeApp', {
// name: '测试app',
// appIcon: 'https://yun.dui88.com/ecb_v2_pdd2_icon.png',
// starNum: 4,
// commentNum: 6800,
// buttonText: '测试按钮'
// });
// player.on('$footerPageClick', () => {
// console.log('xxx');
// });
// player.load('https://yun.dui88.com/ecb_vz2_tjj_mp.mp4');
let defaultConfig;
function getDefaultConfig() {
if (defaultConfig) return defaultConfig;
defaultConfig = {};
// defaultConfig = {
// 'ost':1,
// "slotid":"1007",
// 'osv': '9.1.0',
// 'bundle': 'com.mechat.api',
// "appv":"9.1.0",
// "devt":1,
// "vendor":"HUAWEI",
// "model":"EML-AL00",
// "idfa":"",
// "imei":"866774045494393",
// "imsi":"",
// "androidid":"clb7n19124002087",
// "mac":"02:00:00:00:00:00",
// "sw":1080,
// "sh":2244,
// "ppi":1,
// "opert":3,
// "connt":4,
// "adw":100,
// "adh":100,
// "type":3,
// "ipv4":"115.236.166.122",
// };
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('Version');
defaultConfig.osv = getUrl('osv') || md.version('Ios');
defaultConfig.idfa = '';
} else {
defaultConfig.ost = 1;
defaultConfig.imei = getUrl('imei') || getUrlParameter('deviceId');
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.mac = getUrl('mac') || '02:00:00:00:00:00';
defaultConfig.sw = document.body.clientWidth;
defaultConfig.sh = document.body.clientHeight;
defaultConfig.opert = getUrl('opert') || 0;
defaultConfig.connt = getUrl('connt') || getNetworkType();
defaultConfig.vendor = getUrl('vendor') || md.phone();
defaultConfig.devt = 1;
defaultConfig.bundle = getUrl('bundle');
defaultConfig.appv = getUrl('appv');
defaultConfig.adw = 580;
defaultConfig.adh = 90;
return defaultConfig;
}
class MyAdvideo { class MyAdvideo {
videoReady: boolean;
el: any; el: any;
player: AdVideo; player: AdVideo;
_responseTime: any; _times: any;
_readyTime: any;
_showTime: any;
showReport: any[];
appContent: {}; appContent: {};
url: string; url: string;
isFirstClick: boolean; isVideoIng: boolean;
process25: boolean; process25: boolean;
process50: boolean; process50: boolean;
process75: boolean; process75: boolean;
landpage: any;
videoRaw: {}; videoRaw: {};
playResolve: any; playResolve: any;
playPromise: Promise<{}>; playPromise: Promise<{}>;
playReport: any strategy: any;
macro: any; stragegyFn: any;
constructor(config) { constructor(config) {
this.videoReady = false;
this.el = config.el; this.el = config.el;
this._times = {
_readyTime: '',
_responseTime: '',
_showTime: ''
}
this.hide(); this.hide();
this.player = new AdVideo(config); this.player = new AdVideo(config);
this.reset(); this.reset();
...@@ -224,218 +42,101 @@ class MyAdvideo { ...@@ -224,218 +42,101 @@ class MyAdvideo {
// 重置一些状态 // 重置一些状态
reset() { reset() {
// 视频是否准备好了。 // 各种时间。
this.videoReady = false; this._times = {
// 响应完成时间 _readyTime: '',
this._responseTime = null; _responseTime: '',
// 素材load时间 _showTime: ''
this._readyTime = null; }
// 展示时间
this._showTime = null;
// 曝光地址
this.showReport = [];
// 下载包名信息
this.appContent = {};
// 视频地址 // 视频地址
this.url = ''; this.url = '';
// 第一次点击
this.isFirstClick = true;
// 播放 25%; // 播放 25%;
this.process25 = false; this.process25 = false;
// 播放 50%; // 播放 50%;
this.process50 = false; this.process50 = false;
// 播放 100%; // 播放 100%;
this.process75 = false; this.process75 = false;
this.landpage = null;
this.videoRaw = {}; this.videoRaw = {};
// 视频播放的 Promise // 视频播放的 Promise
this.playResolve = null; this.playResolve = null;
this.playPromise = new Promise((resolve) => { this.playPromise = new Promise((resolve) => {
this.playResolve = resolve; this.playResolve = resolve;
}); });
// 平台策略相关
this.strategy = null;
this.stragegyFn = {
'dianxing': DianXing
}
} }
// 请求完成 // 请求完成
initListener() { initListener() {
this.player.on('play', () => { this.player.on('play', () => {
this._readyTime = +new Date(); this._times._readyTime = +new Date();
this._times.duration = this.player.$video.duration
this.stragegyFn[this.strategy].report.videoLoad(this.videoRaw, this._times);
if (this.player.$video.currentTime === 0) { if (this.player.$video.currentTime === 0) {
this._showTime = +new Date(); this._times._showTime = +new Date();
this.initShowReport(); this.stragegyFn[this.strategy].report.videoPlayStart(this.videoRaw, this._times);
this.reportShow();
console.log(this.playReport);
if (this.playReport["playStart"]) {
this.playReport["playStart"].forEach(e => {
reportGet(e);
});
};
} }
}); });
this.player.on('$footerPageClick', (e) => { this.player.on('$footerPageClick', (e) => {
this.reportClick(e); console.log(e)
}); this.stragegyFn[this.strategy].report.videoClick(this.videoRaw, this._times, e);
this.player.on('$porcess', (e) => { this.stragegyFn[this.strategy].report.appDownload(this.videoRaw, this._times, e);
if (e > 25 && this.playReport["process25"] && !this.process25) { });
this.playReport["process25"].forEach(e => { this.player.on('$process', (e) => {
reportGet(e); if (e > 25 && !this.process25) {
}); this.process25 = true;
this.stragegyFn[this.strategy].report.process25(this.videoRaw, this._times);
}; };
if (e > 50 && this.playReport["process50"] && !this.process50) { if (e > 50 && !this.process50) {
this.playReport["process50"].forEach(e => { this.process50 = true;
reportGet(e); this.stragegyFn[this.strategy].report.process50(this.videoRaw, this._times);
});
} }
if (e > 75 && this.playReport["process75"] && !this.process75) { if (e > 75 && !this.process75) {
this.playReport["process75"].forEach(e => { this.process75 = true;
reportGet(e); this.stragegyFn[this.strategy].report.process75(this.videoRaw, this._times);
});
} }
}); });
this.player.on('ended', () => { this.player.on('ended', () => {
this.playReport["playEnd"].forEach(e => { this.stragegyFn[this.strategy].report.videoPlayEnd(this.videoRaw, this._times);
reportGet(e);
});
this.playResolve(); this.playResolve();
}); });
this.player.on('$videoClose', () => { this.player.on('$videoClose', () => {
this.stragegyFn[this.strategy].report.videoClose(this.videoRaw, this._times);
this.isVideoIng = false;
this.hide(); this.hide();
}); });
} }
// 请求视频的来源 // 请求视频的来源
async getVideo(type) { async getVideo() {
console.log('获取video'); if (this.isVideoIng) {
return new Promise((resolve) => {
window.fetch('/commercialloanv/richMan/rewardVideo', {
body: JSON.stringify(
Object["assign"](
{ type }, getDefaultConfig())
),
headers: {
'content-type': 'application/json'
},
method: 'POST'
}).then(res => {
return res.json();
}).then(res => {
if (res.code === '0000000' && res.data.rewardVideoVo && res.data.rewardVideoVo.rewardvideo) {
this.macro = res.data.rewardVideoVo.macro;
this._responseTime = +new Date();
this.videoRaw = res.data.rewardVideoVo;
this.initVideo(this.videoRaw);
this.initVideoPlayReport(this.videoRaw);
this.videoReady = true;
console.log('获取video 成功');
resolve(true);
} else {
this.videoReady = false;
resolve(false);
}
}).catch(err => {
this.videoReady = false;
console.log(err);
resolve(false);
});
});
}
// 曝光上报
reportShow() {
this.showReport.forEach(e => {
reportGet(e);
});
}
// 曝光上报
initShowReport() {
if (this.macro === 0 || this.macro === 1) {
this.showReport = this.videoRaw["shownotice"] || [];
} else if (this.macro === 2) {
this.showReport = (this.videoRaw["shownotice"] || []).map(e => {
return replaceUrl(e, {
__RESPONSE_TIME__: this._responseTime,
____READY_TIME__: this._readyTime,
__SHOW_TIME__: this._showTime,
__WIDTH__: document.body.clientWidth,
__HEIGHT__: document.body.clientHeight
});
});
}
}
async reportClick(event) {
if (this.macro === 0) {
(this.videoRaw["clicknotice"] || []).forEach(e => {
reportGet(e);
});
this.landpage = this.videoRaw["landingpage"];
} else if (this.macro === 1) {
const clicknotice = (this.videoRaw["clicknotice"] || []).map(e => {
return replaceMacro1(e, event);
});
this.landpage = replaceMacro1(this.videoRaw["landingpage"], event);
clicknotice.forEach(e => {
reportGet(e);
});
//
} else if (this.macro === 2) {
this.landpage = replaceMacro2(this.videoRaw["landingpage"], event, {
responseTime: this._responseTime + "",
readyTime: this._readyTime + "",
clickTime: +new Date() + "",
showTime: this._showTime,
});
const clicknotice = (this.videoRaw["clicknotice"] || []).map(e => {
return replaceMacro2(e, event, {
responseTime: this._responseTime + "",
readyTime: this._readyTime + "",
clickTime: +new Date() + "",
showTime: this._showTime
});
});
clicknotice.forEach(e => {
reportGet(e);
});
}
console.log(this.landpage);
// 跳转链接;
this.linkToThird(this.landpage);
};
// 播放上报
initVideoPlayReport(videoRaw) {
const v = videoRaw.rewardvideo || {};
this.playReport = {
playStart: v.playstart || [],
playEnd: v.playend || [],
process25: v.firstquartile || [],
process50: v.midpoint || [],
porcess75: v.thirdquartile || [],
playclosemid: v.playclosemid || [],
};
}
// 视频地址和展示地址
initVideo(videoRaw) {
// 整理video对象
const v = videoRaw.rewardvideo || {};
this.url = v.video || '';
console.log('iconicon', v.endcardicon);
if (!v.endcardicon) {
this.appContent = null;
return; return;
} }
this.isVideoIng = true;
this.strategy = 'dianxing';
const res = await this.stragegyFn[this.strategy].getVideo('ceshi');
console.log(res);
if (res) {
// 上报app?
if (window["helpbridge"] && window["helpbridge"].adShowing) window["helpbridge"].adShowing();
this.videoRaw = res;
const { url, appIcon, name, slogen } = this.stragegyFn[this.strategy].resolveParams(this.videoRaw);
console.log(url);
this.url = url;
this.appContent = { this.appContent = {
appIcon: v.endcardicon || '', appIcon,
name: v.endcardtitle || '', name,
slogen: v.endcarddesc || '' slogen,
}; }
return true;
} else {
this.isVideoIng = false;
return false;
}
} }
// 跳转三方链接
linkToThird(url) {
window.location.href = url;
};
show() { show() {
this.el.style.display = 'block'; this.el.style.display = 'block';
...@@ -466,6 +167,7 @@ class MyAdvideo { ...@@ -466,6 +167,7 @@ class MyAdvideo {
this.player.play(); this.player.play();
return this.playPromise; return this.playPromise;
} else { } else {
this.isVideoIng = false;
return Promise.reject(new Error('url 不存在')); return Promise.reject(new Error('url 不存在'));
} }
} }
......
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