Working With Twitter's Embedded Videos

Twitter has just launched embedded videos in Tweets. How can we, as app designers, present them to our users?

So, what options do we have? First of all, let's take a look at what the Twitter API provides.

Send a signed request to :

https://api.twitter.com/1.1/statuses/show/560070183650213889.json

In return, we get these entities :

"entities": {
    "hashtags": [],
    "symbols": [],
    "user_mentions": [],
    "urls": [],
    "media": [
      {
	"id": 560070131976392700,
	"id_str": "560070131976392705",
	"indices": [
	  110,
	  132
	],
	"media_url": "http://pbs.twimg.com/ext_tw_video_thumb/560070131976392705/pu/img/TcG_ep5t-iqdLV5R.jpg",
	"media_url_https": "https://pbs.twimg.com/ext_tw_video_thumb/560070131976392705/pu/img/TcG_ep5t-iqdLV5R.jpg",
	"url": "http://t.co/31JoMS50ha",
	"display_url": "pic.twitter.com/31JoMS50ha",
	"expanded_url": "http://twitter.com/twitter/status/560070183650213889/video/1",
	"type": "photo",
	"sizes": {
	  "thumb": {
	    "w": 150,
	    "h": 150,
	    "resize": "crop"
	  },
	  "small": {
	    "w": 340,
	    "h": 191,
	    "resize": "fit"
	  },
	  "medium": {
	    "w": 600,
	    "h": 337,
	    "resize": "fit"
	  },
	  "large": {
	    "w": 1024,
	    "h": 576,
	    "resize": "fit"
	  }
	}
      }
    ]
  },
  "extended_entities": {
    "media": [
      {
	"id": 560070131976392700,
	"id_str": "560070131976392705",
	"indices": [
	  110,
	  132
	],
	"media_url": "http://pbs.twimg.com/ext_tw_video_thumb/560070131976392705/pu/img/TcG_ep5t-iqdLV5R.jpg",
	"media_url_https": "https://pbs.twimg.com/ext_tw_video_thumb/560070131976392705/pu/img/TcG_ep5t-iqdLV5R.jpg",
	"url": "http://t.co/31JoMS50ha",
	"display_url": "pic.twitter.com/31JoMS50ha",
	"expanded_url": "http://twitter.com/twitter/status/560070183650213889/video/1",
	"type": "photo",
	"sizes": {
	  "thumb": {
	    "w": 150,
	    "h": 150,
	    "resize": "crop"
	  },
	  "small": {
	    "w": 340,
	    "h": 191,
	    "resize": "fit"
	  },
	  "medium": {
	    "w": 600,
	    "h": 337,
	    "resize": "fit"
	  },
	  "large": {
	    "w": 1024,
	    "h": 576,
	    "resize": "fit"
	  }
	}
      }
    ]
  },

Oh Twitter! Your API never quite gives developers what they need, does it?

The "media" entity node gives us a static image which we can use as a place-holder.

We also get a brand new "extended_entities" node! Perhaps this will contain a video to which we can link?

Nope. The same image. True, we can add ":small" to the end of the URL to get a different image size, but that's about it. The URL in the entity doesn't point at a video, it's a link back to the Tweet.

With a bit of jiggery-pokery, we can inspect the video element and see that the video loads from this URL :

https://video.twimg.com/ext_tw_video/560070131976392705/pu/vid/1280x720/c4E56sl91ZB7cpYi.mp4

There doesn't seem to be any obvious way to derive the video URL from the image URL. Nor any API call to get it directly. We have to wait until February for the official API to allow video access.

At the moment, there's also no way to POST a video to Twitter. The media/upload API hasn't yet been updated to allow this.

Overall, a bit of a disappointment for app developers. We've been waiting seven months for Twitter expose animated GIFs in Tweets via the API. I guess a few more weeks won't hurt.