Twitter Video Integration with Video Cloud

Note: The steps outlined in this topic are for Flash based players and will not work in HTML5 players and may prevent HTML5 players from functioning.

Twitter is one of the most popular and effective social platforms to share interesting and important thoughts and links to media across the Web. Increasingly, Twitter is becoming a vitally important service from which people find and discover media, including videos managed by Brightcove. Your own team may use Twitter to effectively promote new music videos, breaking news or the latest product innovations. Your audience, fans and most important customers also use Twitter to share what is important to their own friends and followers.

With the recent platform update by Twitter, not only can people share those links, but you can enable integrated playback of your embedded videos to increase the immediacy and engagement with your brand. The purpose of this developer article is to provide an overview of how you can approach this effort with Video Cloud. For more details, please review the following blog post provided by Twitter http://blog.twitter.com/2010/09/better-twitter.html.

For this scenario, we will use an example Tweet promoting a hilarious video.

For example, let’s say Bob tweets:
“OMG, SOOOO funny. Check this out: http://www.funnyvideo.com/videos/115348517001”

Based on this tweet, we need to inform Twitter on how they can dynamically embed the video related to this shared URL. Twitter provides two integration methods so they know how to load the video player. One form of integration provides the full HTTP URL path to the SWF that represents the experience. The second integration relies upon the emerging oEmbed format. Though the first integration may be simpler in syntax, we recommend using oEmbed through JSONP, as it can provide greater control and will likely be more future-proof when needing to deal with Flash, HTML5, and other changes to video experiences.

The first step is to contact Twitter via email to become a formal partner at BrightcoveClientPartnerships@twitter.com. Twitter will then establish a rule in their system to specially recognize your URLs when shared within Twitter. When their service finds a match for your URLs, they will then make an API call to a REST-based end point specified in the configuration process.

For example, Twitter would make the following call to funnyvideo.com based the on the tweet above.

http://api.funnyvideo.com/oembed?url=http%3A%2F%2Fwww.funnyvideo.com
    %2Fvideos%2F115348517001&format=jsonp&callback=getVideoPlayer

The response by FunnyVideo then provides a lot of useful information so Twitter can embed the video experience within the stream activity. This includes information such as the name of the video, the width and height of the player, and the HTML that should be used to load the player.

For example, the following response includes an example HTML-based Video Cloud player embed code.

getVideoPlayer { 
    "version": "1.0", 
    "type": "video", 
    "provider_name": "FunnyVideo", 
    "provider_url": "http://funnyvideo.com/", 
    "width": 480, 
    "height": 270, 
    "title": "This dude is hilarious", 
    “url”: “http://c.brightcove.com/services/viewer/federated_f9/57476347001?isVid=1&isUI=1&publisherID=8025&playerID=57476347001&playerKey=AQ%2E%2E,AAAAAAAAH1k%2E,x0Y4MONFuLO4FhOPAZzCoF0B_H1h5P4W&domain=embed&videoId=115348517001”, 
    "html":
        “<object id=\"flashObj\" 
            width=\"480\" height=\"270\" 
            classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"
            codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0\">
          <param name=\"movie\" 
                    value=\"http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1\" />
          <param name=\"bgcolor\" value=\"#FFFFFF\" />
          <param name=\"flashVars\" value=\"@videoPlayer=115348517001&playerID=57476347001&playerKey=AQ%2E%2E,AAAAAAAAH1k%2E,x0Y4MONFuLO4FhOPAZzCoF0B_H1h5P4W&domain=embed&dynamicStreaming=true\" />
          <param name=\"base\" value=\"http://admin.brightcove.com\" />
          <param name=\"seamlesstabbing\" value=\"false\" />
          <param name=\"allowFullScreen\" value=\"true\" />
          <param name=\"swLiveConnect\" value=\"true\" />
          <param name=\"allowScriptAccess\" value=\"always\" /> 
    <embed src=\"http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1\"
              bgcolor=\"#FFFFFF\"   
              flashVars=\"@videoPlayer=115348517001&playerID=57476347001&playerKey=AQ%2E%2E,AAAAAAAAH1k%2E,x0Y4MONFuLO4FhOPAZzCoF0B_H1h5P4W&domain=embed&dynamicStreaming=true\" base=\"http://admin.brightcove.com\" name=\"flashObj\" width=\"480\" height=\"270\" seamlesstabbing=\"false\" type=\"application/x-shockwave-flash\" allowFullScreen=\"true\" allowScriptAccess=\"always\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\">
    </embed>
  </object>”,
}

It is relatively easy to create a simple web application that handles the API request from Twitter and returns the information about the shared video. Nearly the whole response document can be hard coded into the web application, with a few key elements dynamically specified based on the incoming request.

Assuming that the shared URL includes the video id (for example, in the URL http://www.funnyvideo.com/videos/115348517001 the video id would be 115348517001) then the web application can use the Media API to retrieve the video’s title using the find_video_by_id method. You can specify the desired width and height dimensions for the video player. The most important elements are the url and html values of the JSONP returned document. These two values will be specific to the video player that you want embedded in Twitter.

The following url and html elements should have the player id and player key, your Video Cloud account id, and the video id replaced based on the context of your account and desired video player to load.

“url”: “http://c.brightcove.com/services/viewer/federated_f9/ADD_PLAYER_ID?isVid=1&isUI=1&publisherID=ADD_BCACCOUNT_ID&playerID=ADD_PLAYER_ID&playerKey=ADD_PLAYER_KEY&domain=embed&videoId=ADD_VIDEO_ID”,

"html":
    “<object id=\"flashObj\" width=\"480\" height=\"270\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,47,0\">
      <param name=\"movie\" value=\"http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1\" />
      <param name=\"bgcolor\" value=\"#FFFFFF\" />
      <param name=\"flashVars\" value=\"@videoPlayer=ADD_VIDEO_ID&playerID=ADD_PLAYER_ID&playerKey=ADD_PLAYER_KEY&domain=embed&dynamicStreaming=true\" /> 
      <param name=\"base\" value=\"http://admin.brightcove.com\" />
      <param name=\"seamlesstabbing\" value=\"false\" />
      <param name=\"allowFullScreen\" value=\"true\" />
      <param name=\"swLiveConnect\" value=\"true\" />
      <param name=\"allowScriptAccess\" value=\"always\" />
      <embed src=\"http://c.brightcove.com/services/viewer/federated_f9?isVid=1&isUI=1\" bgcolor=\"#FFFFFF\" flashVars=\"@videoPlayer=ADD_VIDEO_ID&playerID=ADD_PLAYER_ID&playerKey=ADD_PLAYER_KEY&domain=embed&dynamicStreaming=true\" base=\"http://admin.brightcove.com\" name=\"flashObj\" width=\"480\" height=\"270\" seamlesstabbing=\"false\" type=\"application/x-shockwave-flash\" allowFullScreen=\"true\" allowScriptAccess=\"always\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\">
      </embed>
    </object>”,

As part of setting up your partner account, Twitter will need to know the URL pattern to recognize your content. This could be as simple as matching against your domain. Second, you will need to provide a REST-based end point that returns the required JSONP response that includes the information about how to load the video player. As illustrated in the example, when Twitter calls your API they will pass in the URL that was shared in the tweet. As such you should ensure that the URLs shared through Twitter contain enough information that will allow you to identify the video that should be surfaced within the activity stream. In some circumstances the URL will include the video id, but you may also need to tap into your web publishing system to map SEO-friendly URLs and extract the necessarily player information.