Last updated on March 30, 2016 - Back to blog home page
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.
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.
Facebook allows the sharing of 2 different video types. Let us review the pros and cons of each method:
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.
Sharing video content to Facebook requires HTTPS URLs in order to avoid common pitfalls.
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-demo.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-demo.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%2F1703298472.rsc.cdn77.org%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-demo.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%2F1703298472.rsc.cdn77.org%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/big-buck-bunny-360p.mp4"> <meta property="og:video:secure_url" content="https://www.radiantmediaplayer.com/media/big-buck-bunny-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.
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
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-demo.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%2F1703298472.rsc.cdn77.org%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8
flashvars
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-demo.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%2F1703298472.rsc.cdn77.org%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.
Facebook provide a useful testing tool in order to debug open graph objects. Use it to validate your Open Graph data on your page.