Создание интерактивных объявлений

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Интерактив</title>
    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
    <div style="position: absolute; top: 0px; left: 0px">
        <video muted id="v2"></video>
    </div>
    <script>
        var csBackend;
        var video;
        var metaData;

        new QWebChannel(qt.webChannelTransport, function(channel) {
            // объект с данными плеера
            csBackend = channel.objects.csBackend;

            // функция срабатывает, как только страница загрузилась в фоне;
            // все запросы за данными — тут
            csBackend.afterPlayerInit.connect(function() {

                // подставляем контент
                video = document.getElementById("v2");
                video.setAttribute("src", "video.mp4");

                metaData = JSON.parse(csBackend.playerData);

                // GID экрана используется во всех системах — опирайтесь на него
                console.log(metaData.gid);

                // размеры фрейма — контент воспроизводится именно по ним
                console.log("ширина " + metaData.frameResolution.width);
                console.log("высота " + metaData.frameResolution.height);

                // длительность слота в миллисекундах; ролики длиннее можно
                // игнорировать или менять длительность объявления через setDuration
                console.log(metaData.duration);

                // когда объявление выйдет на экран
                var now = Date.now();
                console.log("выйдем на экране через мс: " +
                    (metaData.showingAdvertisementEndTime - now));
            });

            // функция вызывается непосредственно перед показом на экране
            csBackend.beforePlayerShow.connect(function() {
                video.play();
                csBackend.completeData = {
                    htmlProgrammaticAd: "тут можно сохранять бид и прочие данные того, что показали"
                };
            });

            // функция дёргается перед окончанием показа
            csBackend.afterPlayerShow.connect(function() {
                console.log("показ на экране закончился");
            });
        });
    </script>
</body>
</html>

<script>
    // инициализация CS-канала
    var csBackend;
    eval(Android.initCsBackend());

    csBackend.afterPlayerInit.connect(function() {
        var metaData = JSON.parse(csBackend.playerData);
        csBackend.setDuration(10000);
        csBackend.completeData = { "complete": "data" };
    });

    csBackend.beforePlayerShow.connect(function() {
        // старт воспроизведения
    });

    csBackend.afterPlayerShow.connect(function() {
        var completeData = JSON.stringify(csBackend.completeData);
        Android.afterPlayerShow(completeData);
    });
</script>