移动网页广告引入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) DOMException4、mraid代码实现的流程：
先判断mraid状态是否为loading，如果为loading要给mraid注册ready事件，在ready事件中进行相应mraid代码执行，比如判断用户是否在浏览广告，如果不是loading状态，则说明是ready状态，直接执行mraid操作的代码。
mraid.js，所有事件发生都要在ready之后，mraid.open也需要ready之后，只要引入了mraid.js，就可以识别mraid对应的方法存在，但是事件的执行要在ready事件之后。
腾讯云开发者
