Custom video player on Facebook

There are 79 comments.

Custom video player on Facebook

Embed your own video player on Facebook

Facebook and the Open Graph Protocol allows you to define special meta data on your web pages that defines them in Facebook’s social graph. In this post i’ll show you how to set up the meta tags required for you to use a custom video player on Facebook, styled exactly like you want it. It will show up, and play, directly within Facebook status updates whenever someone shares the web page containing that meta data. Pretty cool, huh?

iPhone and iPad support

This method allows for HTML5 fallback which makes the video work on iPhones, iPads and other non-Flash devices. Even inside the native Facebook iPhone app — My example is set up with a HTML5 fallback to show that functionality.

Step 1: Prepare your flash video player

There are two ways you can go here:

  1. Set up your video player to accept a flashvar with the URL to the video file.
  2. Hard-code the URL into the source code of the flash player, so that it keeps track of it internally.

Naturally, going with flashvars is much more dynamic, as you can use the same video player with different video’s if you have more than one on your website. In my example I’ve used the flashvar “url” to supply the video file URL.

Learn how to use flashvars in this video tutorial by Lee Brimelow

Step 2: Utilize Open Graph tags

I’ve put up an example at http://ahrengot.com/playground/circular-scrubbing that has the correct meta tags. If you post the URL to Facebook you’ll see the player embeds correctly. You can view the source and look out for the open graph tags. In my example they are as follows:


<!-- Open Graph tags -->
<meta property="og:title" content="Circular scrubbing video player" />
<meta property="og:description" content="A video player interface experiment, which features circular scrubbing and a very minimal design." />
<meta property="og:type" content="video" />
<meta property="og:url" content="http://ahrengot.com/playground/circular-scrubbing"/>
<meta property="og:image" content="http://ahrengot.com/playground/circular-scrubbing/thumb.jpg"/>
<meta property="og:site_name" content="Ahrengot's Playground"/>
<meta property="fb:admins" content="100000936142315"/>

<!-- Video player specific OG tags -->
<meta property="og:video" content="http://ahrengot.com/playground/circular-scrubbing/video-player.swf?url=http://ahrengot.com/playground/circular-scrubbing/assets/video/example.mp4" />
<meta property="og:video:width" content="374" />
<meta property="og:video:height" content="202" />
<meta property="og:video:type" content="application/x-shockwave-flash" />

The tags are quite self-explanatory, but if you need any help, refer to the documentation.

View on Envato

That’s it – If this was of any help to you, or you have any questions, I’d really appreciate your feedback in the comments. Oh, and if you like the video player in my example it’s available on Envato marketplaces: Video player with circular scrubbing.

  • Pingback: google.com()

  • Pingback: jnciouen804ur()

  • zcsd

    vssdv

  • Ana

    Hi Jens,
    Thank you for creating the video player. I purchased it from Activeden and was successfully able to set up to play in Facebook. However, once my video plays, the player remains gray. Is there a way to specify poster image via the flashvars passed in the URL? Thank you very much for the help!

  • http://www.couponrani.com zovi coupons

    Astounding, this is fantastic portion of create which i’ve unearth for extensive period of time. Conduct in addition , vacation the actual online.

  • http://www.canadagenericonline.com canadaian generic cialis