egretadDemo3rd/index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>白鹭广告第三方接入</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <style>
        html,
        body {
            -ms-touch-action: none;
            background: #888888;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
            text-align: center;
        }
    </style>
    <script src="egretad.min.js"></script>
</head>

<body>
    <div id='game' style="position:absolute;overflow: hidden; width: 100%;height: 100%;max-width:640px">
        <div style="position: absolute;">本地测试，请将 ip 地址换为 localhost</div>
        <div id='output' style="position: absolute;top:50px;left:10px">11</div>
        <button id='btn' style="text-decoration: none;font: 24px/1em 'Droid Sans', sans-serif;
            font-weight: bold; text-shadow: rgba(255,255,255,.5) 0 1px 0; padding: .5em .6em .4em .6em;
            margin: .5em;display: inline-block; border-radius: 8px;border-top: 1px solid rgba(255,255,255,0.8);border-bottom: 1px solid rgba(0,0,0,0.1);color: hsl(0, 0%, 40%) !important;
            background-color: hsl(0, 0%, 75%);position: absolute;">点击播放广告</button>
        <img src="./resource/bg.jpg" style="width: 100%;height: 100%;" />
    </div>
    <script>
        //208 为测试key，请替换成你申请的广告key
        //本地测试，需要将 ip 地址替换为 localhost
        var ad = new egretad.AD('208');
        var output = document.getElementById('output');
        output.innerHTML = "初始化广告";

        ad.addEventListener(egretad.AD.CREATED, () => {
            var info = '广告创建完成，可以播放';
            output.innerHTML = info;
            console.log(info);
        })
        ad.addEventListener(egretad.AD.LOADED, () => {
            var info = '广告开始加载'
            output.innerHTML = info;
            console.log(info);
        })
        ad.addEventListener(egretad.AD.START, () => {
            var info = '广告开始播放'
            output.innerHTML = info;
            console.log(info);
        })
        ad.addEventListener(egretad.AD.END, () => {
            var info = '广告播放结束'
            output.innerHTML = info;
            console.log(info);
        })
        ad.addEventListener(egretad.AD.ERROR, (err) => {
            var info = '广告播放出现错误:' + err;
            output.innerHTML = info;
            console.log(info);
        })
        ad.addEventListener(egretad.AD.CLICK, (err) => {
            var info = '用户点击了广告'
            output.innerHTML = info;
            console.log(info);
        })

        var btn = document.getElementById('btn');
        btn.style.top = (document.getElementById('game').offsetHeight - 60) / 2 + 'px';
        btn.style.left = (document.getElementById('game').offsetWidth - 200) / 2 + 'px';
        btn.addEventListener('click', function () {
            ad.show();
        });
    </script>
</body>

</html>