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

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

背景：

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

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

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

開始

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

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

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

 

可以在線設置廣告位的寬高，粘貼代碼，render之后查看效果。

3、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

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

4、mraid代碼實現的流程：

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

mraid.js，所有事件發生都要在ready之后，mraid.open也需要ready之后，只要引入了mraid.js，就可以識別mraid對應的方法存在，但是事件的執行要在ready事件之后。