Embedding the HandrollTV HTML5 Video Player
Embedding a HandrollTV HTML5 video player on your blog works the same as standard embeds from other sites. Copy the embed code and paste it to the destination blog or page.
In the current V0.2 release we have added the ability to tweet messages about the video to your Twitter steam. We created a player that is made up of both a video and comment panel in order to make that as easy as possible. We also decided in this release to have maximum sharing in place. That means that wherever there is a player, the publisher’s player and all the embedded ones, all the comments from any source will display.
Creating a Player - Rule of Thumb
Before you create a HandrollTV player, find out the column size where you are going to embed the player. For example, if the column is 680 wide (after you reduce for border padding), then create a player that size from the Embed controls for Custom Sizes.
You may have to experiment a bit, but the players are easy to create. Typically what happens is that the column padding will cut off the comment panel.
THE BASICS:
HandrollTV Embed Panel Elements
Click the Embed button on the playbar and it flips to show the embed controls.
Native Size List
At the top of the list is the native size (the largest size available) for the video at the url that you input. Below the native size size we have created 124 pixel decrements for your convenience, but that will not go below 320 pixels.
Custom Size [ width x height ]
Changing either of the dimensions will auto scale the other to maintain aspect ratio.
Embed Code
Click in the lower line and the embed code is automatically copied to the clipboard.
Example Using Blogger
1. Know the column width of your blog or width dimensions for your page. Go to the Design Template to see the column layout sizes for your blog:
The top red circle is the overall width of the blog, 940 pixels. The bottom circle is the side navigation column width, 160 pixels. The remaining area is 780 pixels … although Blogger does not make that explicit.
2. Determine the best width size for the HandrollTV player. While the main column should be 780 pixels (940 minus160) there are some padding pixels around the entire blog and between the columns. So there are more pixels to subtract. You may need to do a few trials until you get the right width.
Here are 2 examples of pixel widths just to show what happens.
This embedded player is too wide at 848 pixels, which is the native width of the video. The comment panel is cut off by the right side navigation column.
This one is just right at 690 pixels wide and fits inside the column. A few tries were needed to get inside of the padding pixels that Blogger adds around the explicit widths. From the calculations above, 780 was what was left over for the main width, but it looks like there are about 90 pixels of padding to get to the ideal 690 wide.
3. Create a HandrollTV Player
Once you know the blog column width, go to the HandrollTV Create page and input your video source URL that you have self-hosted, like this one from Apple’s trailer site (Note that only Safari can play these back.)
http://trailers.apple.com/movies/independent/thewarriorsway/warriorsway-tlr1_480p.mov
Some other URL’s that work in both Chrome and Firefox:
Internet Archive: Lava Lamp
http://ia350619.us.archive.org/1/items/MMMMMoon-LumiereLavaLamp2811/MMMMMoon-LumiereLavaLamp2811_512kb.mp4
Wikimedia Commons: Jelly Fish http://upload.wikimedia.org/wikipedia/commons/a/a6/Moon_Jellies_Swimming.ogv
Gnu.org: Larry Lessig:http://ftp.gnu.org/video/fsf-2009-larrylessig.ogv
4. Get the Custom Embed Code
Click the Embed button. In the Custom input box enter the optimal column width. Click in the embed code box at the bottom and a copy is automatically placed in the clipboard for you to paste on your blog.
HandrollTV Embedded Player!
Let us know what you think! We are already working on the V0.3 release with timecodes baked into the video short url, amongst other features.
dev@handroll.tv
