Supporting Twitter Cards
by Remco van Bree on 2013-05-20 10:24
A while back Twitter introduced a feature called "Twitter cards" that allows you to embed rich content such as video directly into a tweet. The content is then visible when you click "view media" on your timeline, on the permalink for a tweet, when you embed a tweet, and in the official twitter apps. Any site can do this; all you need are some Twitter friendly meta tags in the head of your page and a video page that can be embedded into an iframe. This is really easy to do and Twitter's official documentation is excellent.
In this blog post I will explain how to set up your page so your video can easily be embedded into Twitter.
Twitter Card Principles
Twitter has three kinds of Twitter Cards: Summary, Photo and Player. This post will only cover the Player type of cards, for tweeting video. If you have different types of media on your site (articles or photos) you will want to look into the other types of cards too.
Building a preview page that can be put in an iframe
In order to play back a video within Twitter's web page, you will need to create a special page with just the player that Twitter can put into an iframe on the tweet's details page. This video embed code also needs to work across platforms and devices. Of course the JW Player does just that for you!
A very basic preview page will look like this:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<script src="jwplayer/jwplayer.js"></script>
<script>jwplayer.key="YOUR_PLAYER_KEY_HERE"</script>
<style type="text/css">
html,body { height:100%; width:100%; padding:0; margin:0; }
#player { height:100%; width:100%; padding:0; margin:0; }
</style>
</head>
<body>
<div id='player'></div>
<script type='text/javascript'>
jwplayer('player').setup({
file: "bunny.mp4",
image: "bunny.jpg",
width: "100%",
height: "100%"
});
</script>
</body>
</html>
So essentially all you need is a really simple page with a player configured so it fills the entire page. Twitter has a few requirements that you need to follow when building the preview page that gets embedded into Twitter:
- The preview page and all assets (including the video files) need to be hosted via HTTPS. That means that when you open the preview page directly in the browser, the lock in the navigation bar should be closed. You should also test this on the iOS and Android browsers
- The content must have stop or pause controls
- The content must not play automatically
- The content must not implement its own sharing controls to third party networks, so do not enable the Sharing feature that is in JW Player 6 Premium
- The content must not require viewers to sign in
- The content must not be entirely an ad
Adding Twitter Card properties to the head of your page
Similar to Facebook's OpenGraph tags, you need to put twitter tags into the head of your page. The properties pretty much speak for themselves, so I'm including example code below and will explain a bit more about these properties afterwards:
<meta name="twitter:card" content="player"> <meta name="twitter:site" content="@longtailvideo"> <meta name="twitter:creator" content="@blender3d"> <meta name="twitter:url" content="https://dd8zgnvwlzto.cloudfront.net/twittertutorial/twitter_only.html"> <meta name="twitter:title" content="Big Buck Bunny Trailer"> <meta name="twitter:description" content="Big Buck Buny is an open source movie produced by the Blender Foundation."> <meta name="twitter:image" content="https://dd8zgnvwlzto.cloudfront.net/twittertutorial/bunny.jpg"> <meta name="twitter:player" content="https://dd8zgnvwlzto.cloudfront.net/twittertutorial/embedded.html"> <meta name="twitter:player:width" content="435"> <meta name="twitter:player:height" content="251"> <meta name="twitter:player:stream" content="https://dd8zgnvwlzto.cloudfront.net/twittertutorial/bunny.mp4"> <meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mp4a.40.2"">
- twitter:card This indicates that Twitter should show a player
- twitter:site This is generally the handle of the official Twitter account for your site
- twitter:creator This is the handle of the editor/contributor that created the video
- twitter:url This is the permalink to the page that the video is embedded in
- twitter:title The title of the video
- twitter:description The description of the video. The description has a maximum length of 200 characters
- twitter:image A preview image for the video. This image has a minimum size of 68,600 pixels (a 262x262 square image, or a 350x196 16:9 image)
- twitter:player This is the link to the preview page for the video that we built previously. This link must be a HTTPS URL.
- twitter:player:width and twitter:player:height The dimensions of the video preview in pixels
- twitter:player:stream This is a direct link to your video file. This video file must be an mp4 file. The supported codecs within the file are: H.264 video, Baseline Profile Level 3.0, up to 640 x 480 at 30 fps and AAC Low Complexity Profile (LC) audio. This property is optional
- twitter:player:stream:content_typeThis is the MIME type for your video file. This property is only required if you have set a twitter:player:stream
We have added these twitter card headers to the preview pages of our video platform too, so if you're using that, you can simply copy them over from the source of the preview page and have a head start.
URL Crawling
When someone shares a link through Twitter and Twitter has enabled Twitter cards for your domain, Twitter's crawler will visit your page and check if your page has Twitter Cards set. Twitter uses the Twitterbot User-Agent. If you do have a robots.txt to block certain indexers, you do need to make sure that Twitter's has access to the areas for which you wish Twitter Cards to show.
Submitting to Twitter
Submitting your site to Twitter is a simple, 3-step process:
- Build your Twitter Card integration. Remember to host your video player on HTTPS
- Test your markup with Twitter's preview tool
- Apply for approval from the validation tool
All player cards require special whitelisting and approval by Twitter. Unfortunately we have seen reports that approval of Twitter cards for videos can take many months.
And the winner is…
by Yael Katz on 2013-05-15 15:42
Thanks to everyone who completed our survey. We received 3,000 responses! Input from our users is extremely helpful to us as we work to make JW Player better and better.
Congratulations to Steve from Little Art Web on winning the iPad. We hope you enjoy it :)
New in JW Player: Responsive Design
by Yael Katz on 2013-05-03 16:41
With sales of mobile devices now outpacing those of desktop PCs, web designers face a challenge: how to best present content across all these devices. Smartphone screens average around 4” diagonally, tablets are 7" to 10", laptops average around 14" and desktop monitors go up to 30" these days. All these different devices result in screens of varying shapes and sizes. This presents a challenge when laying out a page - how to provide a viewing experience that looks good on every screen. One solution is responsive design.
What is Responsive Design?
The best way to understand responsive design is to look at what happens when a page is not responsive:
As you can see, when design is not responsive, when you resize your screen, in this case the browser window, the page elements do not resize as well. The traditional way around this is to create multiple sites, one for the desktop, one for a smartphone, etc. This is not ideal, both from the point of view of the designer/developer and the end user experience.
Responsive Web Design is an approach to creating a website that dynamically adapts itself to the size of the screen on which it is being displayed. Whether you are on a tablet, smartphone or desktop, responsive pages rearrange and resize content to provide the optimal viewing experience. If you are interested in looking at a few responsive design examples, we highly recommend checking out this blog.
The Challenge with Responsive Video
While text can easily be manipulated in a responsive design, embedded video has remained a challenge. Unlike the HTML5 <video> tag, which can be scaled responsively by setting max-width:100% and height:auto, embedded players like YouTube, Vimeo and JW Player don’t scale automatically. This is mainly because their embeds contain a fixed width and height in pixels. Responsive designs lay out page elements through relative units, such as percentages, rather than pixels. To properly make a player responsive, it is important that the aspect ratio of the video be maintained by also scaling the height according to this ratio.
To be honest, it is possible to make embedded players such as earlier versions of JW6 responsive by using various CSS hacks. For instance, Elastic Videos uses iframes where the source is 100x100 pixels. FitVids is a jquery plugin that uses additional javascript libraries to achieve responsive design. As you can imagine, these are not the most elegant solutions, nor are they scalable.
Because responsive design is a current web trend used by a lot of sites, we have received many feature requests for JW Player to support it. We wanted to provide a setable option within the player to make it responsive, rather than merely a set of instructions to use JW Player with one of the existing hacks. This was a challenge because JW Player is used on so many sites across both Flash and HTML5 modes, that we had to avoid potential CSS clashes (conflicts between the CSS in the player and the existing CSS on the page).
Introducing JW Player Responsive Design
With the release of JW Player 6.4, we introduced native support for responsive design. To get started, all you have to do is set the player width to a percentage, and indicate the video’s aspect ratio. The player will automatically resize its height accordingly. Here is an example setup:
Click resize to scale the video responsively:
JW Player Setup Code
The responsive player setup options for this demo are displayed below. To learn more about embedding JW Player, check out our support documentation.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
WordPress Setup Options
Our WordPress Plugin version 2.1 makes it even easier to setup JW Player with Responsive design. In the JW Player management section, simply set the player dimensions to responsive:
Check out this demo to test out a responsive vs a non-responsive JW Player. If you have questions on this functionality, or ideas for future updates, please let us know!
The State of HTML5 Video - Q1 2013
by Ed Wolf on 2013-04-23 20:59
It’s been a busy first quarter for 2013! Already this year we have seen Microsoft's foray into tablet with their Surface, and BlackBerry’s release of their long-awaited BB10 phone. To coincide with the latest update of our State of HTML5 Video Report, we’ll explore a couple of industry changes impacting the world of online video.
Market Share Changes
Since our last report in January, we’ve seen a stabilisation in market share for mobile browsers, which remains around 15%. On the desktop side, now that Internet Explorer 10 for Windows 7 has finally been released, there’s a good chance IE9/10’s share will surpass that of Firefox over the next couple of months:
FireFox Gains MP4 Support
It should also be noted that Mozilla has implemented preliminary support for MP4 playback in FireFox. While this functionality is targeted to ship with FireFox 21 later this May, it is currently available for Windows users via their nightly builds. The addition will make MP4 support ubiquitous across all major desktop browsers. We’ll keep an eye out to see if this helps FireFox regain some of its lost market share. Overall it is a step in the right direction for Mozilla, which now makes embedding video content less cumbersome across browsers.
Opera Moves to Webkit
Other significant news this quarter came from Opera, who announced that they will be moving from their own Presto rendering engine to WebKit. In part, this move may have been a result of web designers writing webkit-only mobile sites. Earlier this March, a beta for Opera on Android using WebKit was released, and has mostly positive reviews. As long as Opera is able to deliver features unmatched by their rivals, they should be good to go.
Text Tracks in Chrome for Android
The latest release of the Chrome (v25) for Android 4.0 devices adds new functionality, including support for the <track> element. While testing this, we did come across a few issues. First, this preliminary implementation does not work visually. It causes playback to become garbled and makes the controls unstable. Second, there is no option to enable captions while the player is in fullscreen. Below screenshot is an example of inline playback with captions enabled. As you can see, they are not rendering correctly:
Internet Explorer 10 Improvements
In our last update, Internet Explorer 10 had just been released alongside Windows 8. Since then, the browser has been released for Windows 7, and has gained a market share of some 5%. While IE 10 brings speed enhancements to startup and page rendering times, the biggest improvement is its expanded support for HTML5 and CSS3. In our HTML5 Video tests, we've seen new support for video tracks and VTT captions, plus fixes around video preloading and poster image rendering.
WHOISJW: Free To Watch Documentary
by Yael Katz on 2013-04-02 04:05
We’re pleased to hear the documentary about Jeroen and the JW Player is now free to watch! Here’s the announcement from its creators, PictureThis.tv:WHOISJW? The Best Kept Secret Online
A Source of Inspiration for Ambitious Young People
WHOISJW? is a documentary about a very talented and successful young entrepreneur from Holland: Jeroen Wijering. What started as a simple educational project from a Dutch Design Academy Student rapidly turned out into a web phenomenon; the JW Player.
Nowadays his brainchild is used by millions of people to watch videos on the internet without them even realizing it. Many prestigious websites like Disney, Harvard, IMDB, Intel, NASA en The White House use his JW Player. Even YouTube ran on the JW Player in the first year of their existence.
WHOISJW? is made by PictureThis.tv, a video production company from The Netherlands. Director Eelco Romeijn and Producer Marco van der Ploeg see the story behind Jeroen Wijering and his JW Player as a unique story that needs to be told. They invested in creating this documentary as independent filmmakers and followed Jeroen Wijering for over two years in The Netherlands and in the U.S.A. before finalizing it.
- 1 of 18
- ››
Follow us on Twitter: 