移動網頁廣告引入mraid.js使用指南

在網上找mraid相關資料，相對比較少，大多都是API介紹，概念介紹等，沒有一份詳細的移動端網頁廣告使用教程，通過本身兩天的摸索，完成了開發的移動端網頁版的廣告加入mraid功能。

背景：

我開發了移動端網頁展現的廣告，因爲產品的要求，要實現廣告中的視頻在用戶看到的時候纔會繼續播放，不看的時候不會播放，而默認設置的video 的autoplay自動播放會在用戶打開的狀況下，即便看不到也是種播着，影響了用戶看到的廣告效果，便可能會下降點擊率和轉化率。

而mraid具備自然的優點，mraid能夠識別用戶是否在看着廣告，能夠識別用戶的點擊跳轉，能夠出現關閉按鈕點擊關閉，能夠縮放廣告等，推薦mriad中文版教程：

https://github.com/graypants/mraid_cn/blob/master/mraid_cn.md

開始

一、在網頁中首先引入mraid.js【直接引入便可，不須要在本地放mraid.js，頁面在支持mraid的app中會自動注入】

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

二、在PC端開發完成以後，不方便測試mraid效果，推薦這個網站：http://webtester.mraid.org/

 

能夠在線設置廣告位的寬高，粘貼代碼，render以後查看效果。

三、mraid實現視頻用戶瀏覽時播放，而且點擊下載mraid跳轉完整代碼：

let v = document.getElementsByTagName("video")[0];//獲取video元素
let ad_pic = document.getElementsByClassName("ad_pic")[0];//視頻暫停時的圖片
// 視頻播放
function videoPlay() {
    let videoIsPlay = v.play();
    if (videoIsPlay !== undefined) {
        videoIsPlay.then(() => {//經過異步的方式避免報錯
            ad_pic.style.display = "none";
        }).catch((err) => {
            console.log(err);
            ad_pic.style.display = "none";//默認暫停時的圖片隱藏
            //視頻元素能夠選擇靜音後再播放,提示用戶打開聲音
            v.muted = true;
            v.play();
        });
    }
}
//圖片點擊播放
function cardClick(event) {
    "use strict";
    ad_pic.addEventListener(event, function () {
        videoPlay();
        v.className = '';
    }, true);
}
function adPic() {
    cardClick('tap');
    cardClick('click');
}
// mraid判斷
function mraidPlay() {
    "use strict";
    if (mraid.getState() === 'loading') {
        mraid.addEventListener('ready', onSdkReady);
    } else {
        onSdkReady();
    }
    function onSdkReady() {
        if (mraid.isViewable()) {
            videoPlay();
        } else {
            mraid.addEventListener('viewableChange', function (viewable) {
                if (viewable) {
                    mraid.removeEventListener('viewableChange');
                    videoPlay();
                }
            });
        }
    }
}

在使用video.play()方法的時候，有時候會出現報錯：

Uncaught (in promise) DOMException

有一篇文章寫的比較好:推薦一下

四、mraid代碼實現的流程：

先判斷mraid狀態是否爲loading，若是爲loading要給mraid註冊ready事件，在ready事件中進行相應mraid代碼執行，好比判斷用戶是否在瀏覽廣告，若是不是loading狀態，則說明是ready狀態，直接執行mraid操做的代碼。

mraid.js，全部事件發生都要在ready以後，mraid.open也須要ready以後，只要引入了mraid.js，就能夠識別mraid對應的方法存在，可是事件的執行要在ready事件以後。