Radiant Media Player

Facebook video embed (deprecated)

Last updated on March 30, 2016

Deprecation notice

This blog article explained how to embed a Radiant Media Player version 3 Flash-based player into a Facebook timeline but as Flash is now obsolete in the streaming media industry it should not be considered. Also note that Radiant Media Player version 3 is no longer developed and all customers are invited to upgrade to Radiant Media Player version 4 as soon as possible. An updated article on how to share on Facebook and Twitter with HTML5 video can be found here.

Introduction

Through the use of Open Graph markup it is possible to customise the data you want your user to share on Facebook. More information can be found here.

Specifically we can use dedicated Open Graph markup to share a custom Flash-based video player on Facebook.

Supported video type

Facebook allows the sharing of 2 different video types. Let us review the pros and cons of each method:

  • Flash (application/x-shockwave-flash MIME type): you can share the video with its custom player. That means that any branding, HLS streaming, advertisement or other player options you have on the player will be pushed onto Facebook when a post is shared. Caveat: this only works on Desktop as Flash is not supported on mobile devices.
  • MP4 (video/mp4): in this case you feed to Facebook a direct URL to a MP4 video resource. Facebook will generally use the default HTML5 player for the target browser to render the video. That means no branding or custom player options, just the raw video but the content will be visible on both Desktop and mobile devices.

We can use a combined approach feeding Facebook with both Flash and MP4 video content but at the end of the day it is up to Facebook to determine which format it will display to your audience.

Use HTTPS

Sharing video content to Facebook requires HTTPS URLs in order to avoid common pitfalls.

Open Graph markup

The below example is an example of Open Graph markup to be used with Radiant Media Player in order to share video content directly onto a Facebook timeline. Note that you will need to add this markup on your page (where the player is hosted) in order to make it work.

Open Graph markup example follows:

Do not use the below data for your site as they will display our testing sample. You need to customise those data for each of your website articles.

<meta property="og:url" content="your-page-url">
<meta property="og:title" content="Radiant Media Player for Facebook video embed">
<meta property="og:description" content="Open graph data for Facebook">
<meta property="og:site_name" content="Radiant Media Player">
<meta property="og:image" content="https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg">
<meta property="og:type" content="video.other">
<meta property="fb:app_id" content="your-app-id">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content="https://cdn.radiantmediatechs.com/rmp/v3/latest/flash/rmp-dark.swf?displayStreams=true&controlBarAutoHideTimeout=3&poster=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fimages%2Fposter-rmp-showcase.jpg&loop=false&hideControls=false&autoPlay=true&preload=auto&autoRewind=false&muted=false&forceMute=false&customErrorMessage=This%20content%20is%20currently%20unavailable.&lightTheme=false&streamType=recorded&scaleMode=letterbox&posterScaleMode=letterbox&src_defaultHdLabel=Auto&audioOnly=false&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src_defaultAudioLabel=English&plugin_hls=%2F%2Fcdn.radiantmediatechs.com%2Frmp%2Fv3%2Flatest%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=300&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-2&hls_autoStartMaxDuration=-1&src=https%3A%2F%2Fdqwp3xzzbfhtw.cloudfront.net%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8">
<meta property="og:video:secure_url" content="https://cdn.radiantmediatechs.com/rmp/v3/latest/flash/rmp-dark.swf?displayStreams=true&controlBarAutoHideTimeout=3&poster=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fimages%2Fposter-rmp-showcase.jpg&loop=false&hideControls=false&autoPlay=true&preload=auto&autoRewind=false&muted=false&forceMute=false&customErrorMessage=This%20content%20is%20currently%20unavailable.&lightTheme=false&streamType=recorded&scaleMode=letterbox&posterScaleMode=letterbox&src_defaultHdLabel=Auto&audioOnly=false&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src_defaultAudioLabel=English&plugin_hls=%2F%2Fcdn.radiantmediatechs.com%2Frmp%2Fv3%2Flatest%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=300&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-2&hls_autoStartMaxDuration=-1&src=https%3A%2F%2Fdqwp3xzzbfhtw.cloudfront.net%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video" content="https://www.radiantmediaplayer.com/media/bbb-360p.mp4">
<meta property="og:video:secure_url" content="https://www.radiantmediaplayer.com/media/bbb-360p.mp4">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="360">

og:url: The canonical URL for your page (where the player is hosted).

og:title: The title of your article without any branding such as your site name.

og:description: A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook.

og:site_name: The name of your website (such as Radiant Media Player, not radiantmediaplayer.com).

og:image: Specify an image for a high quality preview in News Feed.

og:type: The type of media of your content. See here for more options.

fb:app_id: In order to use Facebook Domain Insights you must add the app ID to your page.

og:video:type: MIME type of the video. Either application/x-shockwave-flash or video/mp4.

og:video: The URL for the video. If you want the video to play in-line in News Feed, you should use the https:// URL if possible.

og:video:width: Width of video in pixels. This property is required for videos.

og:video:height: Height of video in pixels. This property is required for videos.

As you can see in the above examples we have used both application/x-shockwave-flash and video/mp4 content.

Getting the correct video URL

  • video/mp4: this is the direct URL to your MP4 video content (you must host the MP4 video file on your server)
  • application/x-shockwave-flash: in this case we need to provide a direct URL to a .swf file with query string parameters in its URL. The fastest way to obtain this URL is to use Google Chrome dev tools.
    • First navigate to a web page where Radiant Media Player 3 with its Flash rendition is displayed.
    • Open Chrome dev tools and navigate in the Elements tab (should be the default tab upon opening).
    • Find Radiant Media Player container div tag (with class rmp-container) and open its content
    • Inside you should see an Object tag. Take note of its data attribute as it will serve as our base URL, for example it could be: 
      https://cdn.radiantmediatechs.com/rmp/v3/latest/flash/rmp-dark.swf
    • Inside the Object tag there should be a <param> tag with an attribute name equal to flashvars. Copy the value content of this tag. For example it could be: 
      displayStreams=true&controlBarAutoHideTimeout=3&poster=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fimages%2Fposter-rmp-showcase.jpg&loop=false&hideControls=false&autoPlay=true&preload=auto&autoRewind=false&muted=false&forceMute=false&customErrorMessage=This%20content%20is%20currently%20unavailable.&lightTheme=false&streamType=recorded&scaleMode=letterbox&posterScaleMode=letterbox&src_defaultHdLabel=Auto&audioOnly=false&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src_defaultAudioLabel=English&plugin_hls=%2F%2Fcdn.radiantmediatechs.com%2Frmp%2Fv3%2Flatest%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=300&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-2&hls_autoStartMaxDuration=-1&src=https%3A%2F%2Fdqwp3xzzbfhtw.cloudfront.net%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8
    • Then we just need to use our base URL, add a query string delimiter (?) and the value of our flashvars
    • Final result should look like: 
      https://cdn.radiantmediatechs.com/rmp/v3/latest/flash/rmp-dark.swf?displayStreams=true&controlBarAutoHideTimeout=3&poster=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fimages%2Fposter-rmp-showcase.jpg&loop=false&hideControls=false&autoPlay=true&preload=auto&autoRewind=false&muted=false&forceMute=false&customErrorMessage=This%20content%20is%20currently%20unavailable.&lightTheme=false&streamType=recorded&scaleMode=letterbox&posterScaleMode=letterbox&src_defaultHdLabel=Auto&audioOnly=false&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src_defaultAudioLabel=English&plugin_hls=%2F%2Fcdn.radiantmediatechs.com%2Frmp%2Fv3%2Flatest%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=300&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-2&hls_autoStartMaxDuration=-1&src=https%3A%2F%2Fdqwp3xzzbfhtw.cloudfront.net%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8

A complete example can be found here.

If you are to deploy this on a large scale you will need to automate the addition of open graph markup into your page. You can use PHP or another server side language to do so.

Note that the flashvars that you get from Chrome dev tools should be URL-encoded for any special character otherwise Flash may ignore them or even not render at all if it breaks the rendering code.

Test your Open Graph markup

Facebook provide a useful testing tool in order to debug open graph objects. Use it to validate your Open Graph data on your page.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.