This page offers an introduction to MRAID and mobile video. It attempts to answer questions such as:
MRAID is often used as a buzzword to describe mobile rich media creatives. In reality, MRAID is a technology designed for a specific use case (in-app advertising) with some specific functionalities. This overview will help you get a better understanding of this technology. After reading this page you should be able to answer questions like:
This is how the IAB describes MRAID:
Let's review the parts I've marked in bold:
All content in this document refers to MRAID 2.0. You can download the full spec from here.
To explain the need for MRAID, we need to examine the two main use cases in which ads are shown on mobile devices; Mobile Web and In-App. There is a fundamental difference in the technologies involved in both cases, and that difference creates the need for MRAID.
In mobile web, the ad and the container it's running in (the browser) both "speak" HTML5/JS, so they can communicate freely with each other. The creative can ask the web page to perform actions on the iframe such as change its size (expand).
The diagram below illustrates the relationship between the creative that is using HTML5/JS, MRAID, and the app that is running in native code.
The main thing to remember is that HTML5/JS and MRAID are not mutually exclusive technologies. MRAID was designed so that creatives can use HTML5/JS to communicate with native mobile apps.
The main functionality of MRAID is to allow a creative that is running on In-App inventory to change its size, get information about its position on the screen and about the screen size. There are additional functions that allow the creative to store photos in the device memory, create a calendar event, and access the native video player.
Below is a list of all the methods available in the API defined by MRAID, grouped by functionality:
|Methods used for size change / expansion||Other UI functionality||Non UI functionality|
It's easy to see that a full 50% of the methods defined by MRAID relate to size changes. This is a direct result of the inability of the creative to directly communicate with the app the way it does with the browser on mobile and desktop web.
Based on the methods listed above, there are four things MRAID does that the user can see:
There are several ways to play a video on a mobile device, each with its own capabilities and behaviors. You can see how MRAID and HTML5 videos behave by loading placement ID 2579103, size 300x250, in the SDK App. The code for each creative is described below.
Before we continue, a few words about the term "Advertising SDK" used below. A Software Development Kit (SDK) is a piece of code that makes it easy for app developers to show ads in their apps. The two main roles Advertising SDKs perform are:
For more information about our mobile SDKs, see Xandr Mobile SDKs.
This is actually the simplest way to auto-play a video, but it has a significant drawback because it is impossible to define a click on the video. That is, users cannot click the video and be redirected to the advertiser's website. The reason for this drawback is that using MRAID to play a video opens the video in the device's native player, which is not a web page and therefore does not support clicks. This is why when you click a video being played using MRAID, you see the player controls.
Below is a simple working example of an MRAID video of a dog:
One thing all mobile ads have in common is that they run in actual web browsers. Both the iFrame in a mobile web page and the WebView running in a native mobile app are fully functional web browsers, and therefore have full HTML5 support. HTML5 supports playing video in the browser without requiring an external player. However, iOS and Android have different behaviors and implementations for HTML5 video. Below is sample code of a working HTML5 video of a cat.
However, there are some complications with HTML5 video due to differences between Android and iOS, and between phones and tablets:
Devices running Android 4.4+ or iOS 6+ do not allow HTML5 videos to autoplay by default. This means developers have to add the
controls attribute to the
<video> element so that the video player shows the play/pause, seek bar, and mute controls so that the user can initiate and interact with the video. While autoplay behavior can be controlled by the advertising SDK that is running in the app, it will not solve the case for Mobile Web inventory, and does not promise consistent behavior for the creative across different apps running different advertising SDKs.
The Xandr SDK supports autoplay for HTML5 videos, which is the behavior you will see when using the SDK app. However, a mobile browser on the same device will not autoplay the video.
webkit-playsinlineattribute to the
<video>element, and enabling inline playback in the advertising SDK. This implementation is not standard and does not promise consistent behavior for the creative across different apps running different advertising SDKs.
This is the most versatile option. Keep in mind that it is SDK-dependent and not standard. If the advertising SDK that is running in the app includes a video player, then the advertising SDK can direct the
mraid.playVideo() call to that player, and include a click URL in it. However, because this API is not defined in MRAID, there is no guarantee that the ad will run the same way across different apps.