Radiant Media Player

Facebook video embed

Last updated on March 30, 2016


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 customise sharing on Facebook of video content.

Note: using the method described in this blog post your video will directly appear in the news feed of a user when shared on Facebook. Depending on your use case, it may not be the best approach: for example if you want users to be redirected to your site to promote auxiliary content this may not work at best as your viewers will remain on Facebook most of the time. This approach works great to promote viral content.


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 within its player context. That means that any branding, HLS streaming, closed captions 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 modern 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 in order to avoid common pitfalls. You could make it work with HTTP but you will most likely face limitations, that is why we recommend using HTTPS URLs for sharing custom video content on Facebook.


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 news feed. Note that you will need to add this markup on your page (where the player is hosted) in order to make it work.

We have a full implementation example here. You can refer to it when necessary. You can directly share this URL on Facebook or use the player sharing module (Facebook icon) to start the sharing process to see how it renders on Facebook (beware: do not share this URL to your network unless you want to, this is just a testing sample).

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="https://www.radiantmediaplayer.com/blog/examples/facebook-video-embed-example.html">
<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="415948668602606">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video" content="https://cdn.radiantmediatechs.com/rmp/3.5.0/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=false&muted=false&customErrorMessage=This%20content%20is%20currently%20unavailable&lightTheme=false&streamType=recorded&scaleMode=letterbox&src_defaultHdLabel=Auto&sharing=true&documentUrl=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fblog%2Fexamples%2Ffacebook-video-embed-example.html&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src=https%3A%2F%2Fstreamingrmp-1479.kxcdn.com%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8&src_defaultAudioLabel=English&plugin_hls=https%3A%2F%2Fcdn.radiantmediatechs.com%2Frmp%2F3.5.0%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=100&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-1&hls_autoStartMaxDuration=-1">
<meta property="og:video:secure_url" content="https://cdn.radiantmediatechs.com/rmp/3.5.0/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=false&muted=false&customErrorMessage=This%20content%20is%20currently%20unavailable&lightTheme=false&streamType=recorded&scaleMode=letterbox&src_defaultHdLabel=Auto&sharing=true&documentUrl=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fblog%2Fexamples%2Ffacebook-video-embed-example.html&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src=https%3A%2F%2Fstreamingrmp-1479.kxcdn.com%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8&src_defaultAudioLabel=English&plugin_hls=https%3A%2F%2Fcdn.radiantmediatechs.com%2Frmp%2F3.5.0%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=100&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-1&hls_autoStartMaxDuration=-1">
<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. However it is up to Facebook to decide which to display and when. You may want to include only one depending on your use case.


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 parameters in its URL. The fastest way to obtain this URL is to use Chrome dev tools.
    • First go on the page where the player with its Flash rendition is displayed (example here).
    • Open Chrome dev tools (Ctrl + Shift + I on Windows) 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, in our example this is:
      https://cdn.radiantmediatechs.com/rmp/3.5.0/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. In our example this is:
      displayStreams=true&controlBarAutoHideTimeout=3&poster=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fimages%2Fposter-rmp-showcase.jpg&loop=false&hideControls=false&autoPlay=false&muted=false&customErrorMessage=This content is currently unavailable&lightTheme=false&streamType=recorded&scaleMode=letterbox&src_defaultHdLabel=Auto&sharing=true&documentUrl=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fblog%2Fexamples%2Ffacebook-video-embed-example.html&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src=https%3A%2F%2Fstreamingrmp-1479.kxcdn.com%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8&src_defaultAudioLabel=English&plugin_hls=https://cdn.radiantmediatechs.com/rmp/3.5.0/flash/rmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=100&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-1&hls_autoStartMaxDuration=-1
    • 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/3.5.0/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=false&muted=false&customErrorMessage=This%20content%20is%20currently%20unavailable&lightTheme=false&streamType=recorded&scaleMode=letterbox&src_defaultHdLabel=Auto&sharing=true&documentUrl=https%3A%2F%2Fwww.radiantmediaplayer.com%2Fblog%2Fexamples%2Ffacebook-video-embed-example.html&javascriptCallbackFunction=onRmpFlashJavaScriptBridgeCreated&src=https%3A%2F%2Fstreamingrmp-1479.kxcdn.com%2Fvod%2Fsmil%3Abbb.smil%2Fplaylist.m3u8&src_defaultAudioLabel=English&plugin_hls=https%3A%2F%2Fcdn.radiantmediatechs.com%2Frmp%2F3.5.0%2Fflash%2Frmp-hls.swf&hls_minbufferlength=1&hls_lowbufferlength=1&hls_maxbufferlength=100&hls_seekmode=ACCURATE&hls_flushliveurlcache=false&hls_capleveltostage=false&hls_startfromlevel=-1&hls_autoStartMaxDuration=-1

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 a another server side language to do so. Note that the flashvars value need to 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.