HandrollTV 0.2 "Malware"
Mar 03
Disney acquires gaming engine startup to build HTML5 games outside of App stores
Oct 27
“54% of web video is now available for playback in HTML5. Double in 5 months.”
— HTML5 Video Available on the Web – October Update
Introducing Sencha Animator: The CSS3 Alternative to Flash - Sencha - Blog
Oct 26
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
Oct 25
Self-hosted Video
A HandrollTV player can be created for any self-hosted video where the video source URL is either known by you (the publisher) or is out in the open in a list or can be found by a right-click on the video. As long as your URL ends in a filename (like: mp4, ogv, webm) the HandrollTV player can be created.
Right-click a video in its player, the drop down shows this:
You can copy that link and then paste it into the Handroll.TV Create page to make your player. The embed code that you get from our site will create a player on your blog that points to the place where the video is self-hosted (or hosted in case you use videos from other sources).
Generally you will see that a right-click on a video will show that the publisher has used Flash for their player. In that case the video URL is hidden and you can’t embed that content in the HandrollTV player.
Here is an example of an open source movie trailer for Sita Sings the Blues, by Nina Paley that is hosted on the Internet Archive:
http://ia340935.us.archive.org/1/items/SitaSingstheBlues_Trailer1/SitaTrailer1.2Sorensen_512kb.mp4
If you want that trailer on your site, copy this video URL and paste it into the input box on http://www.handroll.tv/ and a HandrollTV HTML5 video player is automatically created for you to copy the embed code from and paste on your site. (See the post on Embedding).
Video URL’s in the Wild
While building the HandrollTV player we found a lot of self-hosted videos URL’s in the wild where a right-click on the video gives you a URL that can be copied and a HandrollTV created for it. Here are some samples that we found on the Internet Archive and also Wikimedia Commons.
Here is a sample blog of videos about plants in motion built entirely from openly available clips:
Plants In Motion
INTERNET ARCHIVE (both .mp4 and .ogv)
Remix Manifesto
http://ia360706.us.archive.org/16/items/trailer_RiP_A_Remix_Manifesto_zhtw_subtitled/Eyesteelfilm-TrailerRiPARemixManifesto882-computer_512kb.mp4
The Beatles
http://ia341303.us.archive.org/3/items/TheBeatles-TwistAndShout/TheBeatles-TwistAndShout_512kb.mp4
King Crimson
http://ia311016.us.archive.org/3/items/Skateboard-KingCrimson-RadioI/KingCrimson-RadioI_512kb.mp4
Sensitive Plant
http://ia301541.us.archive.org/0/items/Sofianaudry-MimosaPudicaAtComPeung704/Sofianaudry-MimosaPudicaAtComPeung704_512kb.mp4
Spawn Trailer
http://www.archive.org/download/SpawnTrailer/spawntrailer_512kb.mp4
Food Stop Motion
http://ia360708.us.archive.org/21/items/RICICLA_853/16-Ricicla.ogv
Skateboarding
http://ia301510.us.archive.org/1/items/dysonramones/dysonramones_512kb.mp4
WIKIMEDIA COMMONS
Jelly Fish
http://upload.wikimedia.org/wikipedia/commons/a/a6/Moon_Jellies_Swimming.ogv
Chinese Noodle Shophttp://upload.wikimedia.org/wikipedia/commons/7/7d/Noodle_making_in_Peng_Zhou.ogv
Silicate Garden Stop Motionhttp://upload.wikimedia.org/wikipedia/commons/1/15/Silicate_garden_growing_0001.ogg
Fingers Typinghttp://upload.wikimedia.org/wikipedia/commons/e/e6/Typing_example.ogv
Remember that HTML5 browsers do not play all video file formats. Here is a reminder about what can be played in each browser:
Chrome: .mp4 | .ogv | .webm
Safari: .mp4 | .mov
Firefox: .ogv | .webm (future)
Have fun! And we will be posting more video directories soon.
Live and Rolling — Handroll.tv Dot2 “Malware”
We didn’t get the software out before the Man came down so GropeCamp is now renamed Malware. Our release names are Firefly references from here on in. That’s what I get for introducing @donnabella to Serenity.
As we dug further into the future of distributed video, two things became clear:
- YouTube keeps all the social goodies it gathers around publisher videos for itself. All those comments, likes, etc., need to benefit the publisher and actual video distributors—embedders from here on out. It’s not acceptable for your text post comments to vanish into WordPress or Disqus, so why is it ok with your videos?
- There’s a lot of room to maneuver on Twitter. Hats off to the TwitVid guys for making linking and posting easy, but the content of the video needs to be mined and hacked.
The main change that you’ll notice with Malware is the addition of a basic Twitter client. It”s intended to aid and abet dialog about the videos’ content, building a resource of high and low points.
We’ve got a couple of how-to posts written on self-hosting video [update: now posted], page layout tips [update: now posted], including pointers to examples that I’ll get up in a jiffy. In the meantime here’s a screen shot of the player and a link to an example blog as we can’t yet post HTML5 video here on Tumblr. Only Chrome and Firefox work with this particular video compression algorithm (OGV).
Oct 16
In the short term, HTML as a gaming platform is emerging as a real Flash killer. In the long term, I wouldn’t be surprised if HTML games will be widely played on Mac, PC, TV console, and mobile phone platforms. Whatever happens, browsers will continue to be pushed to conform to modern specifications and perform ever better, making mobile rich web applications more and more feasible. (via An Onslaught of Mobile HTML Games | Boris Smus)
And now IE8 on the left and IE9 on the right. Although IE8 is a total fail, IE9 is only marginally better. Look at the images above, then at IE9. Very disappointing: (via IE9 is the IE6 of CSS3 « CSS3 Wizardry)
Oct 08
“Despite opinions to the contrary, mobile web apps still feel like an excellent opportunity to offer native-like performance without having to specialize in a particular platform, or be subject to the whims of an overlord.”
— Here’s what we’ve learned about doing UI for mobile web apps with WebKit - (37signals)
Sep 26
Zynga Bets on HTML5 With Dextrose Acquisition
