Radiant Media Player

Working with Facebook Instant Articles



Scope of support

Facebook recently introduced a dedicated format for news publishers called Instant Articles. Those Instant Articles can be consumed directly inside Facebook applications on Android and iOS. This new format aims at offering a better user experience than "classic" mobile web articles thanks to faster page load and pre-defined content types. This is similar in concept to Google AMP. Those articles are rendered in a WebView managed by Facebook application. This WebView is different from Facebook in-app browser and has some limitations, especially on iOS, when it comes to displaying media content.

On Android we can use an iframe embed to display Radiant Media Player and our testing shows that it works well even for advanced features like video ads. Video ads will be rendered through our rmp-vast ad parser for Facebook Instant Articles in Android as the IMA SDK does not officially support this environment.

On iOS, Facebook Instant Articles do not allow inline playback of HTML5 video and we are thus very limited when it comes to using custom HTML5 video player. As a result we recommend using a simple HTML5 video tag for rendering video content within Facebook Instant Articles for iOS. This is not a limitation with Radiant Media Player - even YouTube player is displayed with a simple HTML5 video tag in Facebook Instant Articles for iOS. Until Facebook allows for inline playback of HTML5 video with Instant Articles on iOS using Radiant Media Player in such environment is not supported and is likely to cause unwanted side effects.


Complete example

To embed Radiant Media Player in Facebook Instant Articles for Android we will use iframe embedding.

You can find a complete example of well-formed example article here. Please view source on this page to understand the markup. Essentially our player consists of:

<figure class="op-interactive">
  <iframe width="480" height="270" src="https://www.rmp-streaming.com/iframe/iframe-fbia.html"></iframe>
</figure>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.