javascript - MRAID - 插页式 - 如何防止 css 动画和内嵌视频在广告出现之前播放？

Question

当用户从不同的标签返回“主页”时，插页式广告应该出现在移动应用程序中。

我遇到的问题是，即使广告的动画和视频尚未出现，它也会开始播放。因此，当用户看到广告时，动画和视频已经结束。我想阻止它们在它出现之前启动。

我设法在Android上解决了这个问题，但它似乎不适用于IOS。以下是部分代码：

<script src="mraid.js"></script>

try {
    if (mraid.getState() === 'loading') {
        mraid.addEventListener('ready', function(){
            mraid.addEventListener('exposureChange',init);  
        });
    } else {
        mraid.addEventListener('exposureChange',init);
    }
} catch (error) {
    init();
}


function init(){

        mraid.removeEventListener('exposureChange',init);

        container.style.display = "block";

        initialMute.addEventListener('click', initialSound);
        videoControls.addEventListener('mouseover',showControls);
        videoControls.addEventListener('mouseout',hideControls);
        playBtn.addEventListener('click', playControl);
        pauseBtn.addEventListener('click', playControl);
        repBtn.addEventListener('click', replayVideo);
        vid.addEventListener('ended',videoEnd);


        var x = document.getElementById('vid');

        x.setAttribute("src", "https://example.mp4");
        x.muted = true
        x.playsinline = true;
        x.setAttribute('webkit-playsinline', 'webkit-playsinline');

        console.log('video starts');

        startAnimate();

        csWriteVideoStarts();

        promisePlay();
}

谢谢！