Outstream MoeVideo

<div id="contentroll" style="position: relative;"></div>
<script type="text/javascript">
(() => {
    const VIDEO_CONTAINER_ID = 'contentroll';

    const RSYA_VIEW_TIME_MS  = 3500;
    const VIDEO_MAX_WAIT_MS = 3100;
    const VIDEO_CLOSE_ON_COMPLETE_TIMEOUT = 2000;

    const VIDEO_PLACEMENT_ID = 12946;
    const VIDEO_ADVERT_COUNT = 30;

    const STEP1_SITE_ID  = 225780;
    const STEP1_BLOCK_ID = 721726;

    const FALLBACK_SITE_ID    = 225780;
    const FALLBACK_BLOCK_ID   = 721724;

    const videoContainer = document.querySelector('#'+VIDEO_CONTAINER_ID);
    if (!videoContainer) return;

    const bannerWrapper = document.createElement('div');
    bannerWrapper.id = VIDEO_CONTAINER_ID + '_banner_wrapper';
    bannerWrapper.style.cssText = 'position: relative; width: 100%; z-index: 10; background: #fff; min-height: 0;';

    videoContainer.parentNode.insertBefore(bannerWrapper, videoContainer);

    videoContainer.style.cssText = 'position: absolute; top: 0; left: 0; width: 100%; height: 300px; z-index: -1; opacity: 0; pointer-events: none;';

    let state = {
        bannerRendered: false,
        bannerEmpty:    false,
        bannerViewed:   false,
        videoLibLoaded: false,
        videoReady:    false,
        videoShown:    false,
        videoFinished: false,
        videoFailed:   false,
        finalized: false
    };

    const makeLogger = (tag = 'Waterfall') => {
        const prefix = "[" + tag + "] ->";
        return {
            log: (...args) => console.log(prefix, ...args),
            error: (...args) => console.error(prefix, ...args)
        };
    };
    const logger = makeLogger();

    const enqueueLuxupBlock = (divId, siteId, blockId) => {
        (window['__lxGc__'] = window['__lxGc__'] || {'s':{},'b':0})['cmd'] = window['__lxGc__']['cmd'] || [];
        window['__lxGc__']['cmd'].push(function(){
            window['__lxGc__']['display'](divId, "_"+siteId, "_"+blockId);
        });
    };

    const showFallback = (reason) => {
        if (state.finalized) return;
        state.finalized = true;

        if (bannerWrapper.parentNode) bannerWrapper.parentNode.removeChild(bannerWrapper);

        videoContainer.innerHTML = '';
        videoContainer.style.display = 'none';

        logger.log("Шаг 3: Заглушка. Причина: "+reason);

        const fallbackDiv = document.createElement('div');
        fallbackDiv.id = "lx_" + FALLBACK_BLOCK_ID + "_wrapper";

        if (videoContainer.parentNode) {
             videoContainer.parentNode.insertBefore(fallbackDiv, videoContainer);
        }
        enqueueLuxupBlock(fallbackDiv.id, FALLBACK_SITE_ID, FALLBACK_BLOCK_ID);
    };

    const showVideo = () => {
        if (state.finalized || state.videoShown) return;
        state.videoShown = true;

        logger.log('Успех! Снимаем слой баннера, показываем видео');

        if (bannerWrapper.parentNode) bannerWrapper.parentNode.removeChild(bannerWrapper);

        videoContainer.style.position = 'relative';
        videoContainer.style.zIndex   = '100';
        videoContainer.style.opacity  = '1';
        videoContainer.style.height   = 'auto';
        videoContainer.style.pointerEvents = 'auto';
    };

    const checkStatus = () => {
        if (state.bannerEmpty) {
            showFallback('Баннер пуст');
            return;
        }
        if (!state.bannerViewed) return;
        if (state.videoReady) {
            showVideo();
        }
    };

    const prepareVideo = () => {
        var closeOnCompleteTimeout = null;

        logger.log("Запускаем инициализацию moevideo в скрытом контейнере...");

        window['addContentRoll']({
            element:     '#'+VIDEO_CONTAINER_ID,
            width:       '100%',
            placement:   VIDEO_PLACEMENT_ID,
            promo:       true,
            advertCount: VIDEO_ADVERT_COUNT,
            slot:        'page',
            sound:       'onclick',
            deviceMode:  'all',
            background:  'none',
            fly:         {mode: 'off'},

            playerLoad: function() { logger.log("addContentRoll событие: PlayerLoad"); },
            playerClose: function() {
                logger.log("addContentRoll событие: PlayerClose");
                state.videoFailed = true;
                if (state.videoShown) showFallback('Видео закрыто');
            },
            adLoad: function() { logger.log("addContentRoll событие: AdLoaded"); },
            adStart: function() {
                logger.log("addContentRoll событие: AdStarted -> ВИДЕО ГОТОВО");
                state.videoReady = true;
                if (closeOnCompleteTimeout) { clearTimeout(closeOnCompleteTimeout); closeOnCompleteTimeout = null; }
                checkStatus();
            },
            adImp: function() { logger.log("addContentRoll событие: AdImpression"); },
            ad25: function() { logger.log("addContentRoll событие: AdVideoFirstQuartile"); },
            ad50: function() { logger.log("addContentRoll событие: AdVideoMidpoint"); },
            ad75: function() { logger.log("addContentRoll событие: AdVideoThirdQuartile"); },

            adCompl: function() {
                logger.log("addContentRoll событие: AdVideoComplete");
                closeOnCompleteTimeout = setTimeout(() => {
                    logger.log("addContentRoll таймаут завершения видео");
                    state.videoFinished = true;
                    if (state.videoShown) {
                        showFallback('Видео завершено (таймаут)');
                    }
                }, VIDEO_CLOSE_ON_COMPLETE_TIMEOUT);
            },

            adFinish: function() {
                logger.log("addContentRoll событие: AdStopped");
                state.videoFinished = true;
                if (closeOnCompleteTimeout) { clearTimeout(closeOnCompleteTimeout); closeOnCompleteTimeout = null; }
                if (state.videoShown) {
                    showFallback('Видео завершено (AdStopped)');
                }
            },

            adError: function() {
                logger.log("addContentRoll событие: AdError");
                state.videoFailed = true;
                if (state.videoShown) showFallback('Ошибка видео');
            },
            adEmpty: function() {
                logger.log("addContentRoll событие: AdEmpty");
                state.videoFailed = true;
                if (state.videoShown) showFallback('Видео пустое');
            }
        });
    };

    const runBannerStep = () => {
        logger.log('Поток 1: Старт баннера');

        const bannerDiv = document.createElement('div');
        bannerDiv.id = "lx_" + STEP1_BLOCK_ID;
        bannerWrapper.appendChild(bannerDiv);

        enqueueLuxupBlock(bannerDiv.id, STEP1_SITE_ID, STEP1_BLOCK_ID);

        let accumulatedTime = 0;
        let enterTimestamp  = 0;
        let finishTimeout   = null;

        const bannerViewedCallback = () => {
            if (state.finalized) return;
            logger.log("   Баннер просмотрен (" + RSYA_VIEW_TIME_MS + "ms)");
            state.bannerViewed = true;
            if (finishTimeout) { clearTimeout(finishTimeout); finishTimeout = null; }
            viewedObserver.disconnect();
            checkStatus();
        };

        const viewedObserver = new IntersectionObserver((entries) => {
            const isIntersecting = entries[0].isIntersecting;
            if (isIntersecting && bannerWrapper.isConnected && !state.finalized) {
                logger.log("   Баннер видим");
                if (!enterTimestamp) {
                    enterTimestamp  = Date.now();
                    const remaining = RSYA_VIEW_TIME_MS-accumulatedTime;
                    if (remaining <= 0) bannerViewedCallback();
                    else finishTimeout = setTimeout(() => {
                        if (!state.finalized) {
                            if (enterTimestamp) { accumulatedTime += Date.now()-enterTimestamp; enterTimestamp = 0; }
                            if (accumulatedTime >= RSYA_VIEW_TIME_MS) bannerViewedCallback();
                        }
                    }, remaining);
                }
            } else {
                logger.log("   Баннер не видим");
                if (enterTimestamp) { accumulatedTime += Date.now()-enterTimestamp; enterTimestamp = 0; }
                if (finishTimeout) { clearTimeout(finishTimeout); finishTimeout = null; }
            }
        }, {threshold: 0.5});

        const bannerReadyObserver = new MutationObserver(() => {
            if (state.finalized) { bannerReadyObserver.disconnect(); return; }
            if (!state.bannerRendered && bannerWrapper.querySelector('.__lxG__not_empty_block')) {
                state.bannerRendered = true;
                logger.log('Баннер загружен, запускаем Observer просмотра');
                viewedObserver.observe(bannerWrapper);
            }
            if (!state.bannerEmpty && bannerWrapper.querySelector('.__lxG__rendered_none')) {
                state.bannerEmpty = true;
                logger.log('Баннер пустой');
                bannerReadyObserver.disconnect();
                checkStatus();
            }
        });
        bannerReadyObserver.observe(bannerWrapper, { childList: true, subtree: true, attributes: true });

        if (bannerWrapper.querySelector('.__lxG__not_empty_block')) {
             state.bannerRendered = true;
             viewedObserver.observe(bannerWrapper);
        }
    };

    const runVideoStep = () => {
        logger.log('Поток 2: Старт видео (фон)');
        const s = document.createElement("script");
        s.src = "https://cdn1.moe.video/p/cr.js";
        s.async = true;

        setTimeout(() => {
            if (!state.finalized && !state.videoReady) {
                state.videoFailed = true;
                if (state.bannerViewed) logger.log('Глобальный таймаут видео (но заглушку не показываем, висит баннер)');
            }
        }, VIDEO_MAX_WAIT_MS);

        s.onload = () => {
            state.videoLibLoaded = true;
            logger.log("moe.video загружен");
            prepareVideo();
        };
        s.onerror = () => {
            logger.log("moe.video ошибка загрузки");
            state.videoFailed = true;
        };
        document.head.appendChild(s);
    };

    runBannerStep();
    runVideoStep();
})();
</script>