HandrollTV 0.2 "Malware"

Disney acquires gaming engine startup to build HTML5 games outside of App stores

rafer — Thu, 03 Mar 2011 06:52:30 -0800

Disney acquires gaming engine startup to build HTML5 games outside of App stores

"54% of web video is now available for playback in HTML5. Double in 5 months."

rafer — Wed, 27 Oct 2010 14:42:12 -0700

“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

rafer — Wed, 27 Oct 2010 13:30:51 -0700

Introducing Sencha Animator: The CSS3 Alternative to Flash - Sencha - Blog

Embedding the HandrollTV HTML5 Video Player

donnaromer — Tue, 26 Oct 2010 07:19:18 -0700

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

Self-hosted Video

donnaromer — Mon, 25 Oct 2010 15:25:15 -0700

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"

rafer — Mon, 25 Oct 2010 14:31:00 -0700

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).

In the short term, HTML as a gaming platform is emerging as a...

rafer — Sat, 16 Oct 2010 14:19:24 -0700

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...

rafer — Sat, 16 Oct 2010 05:00:00 -0700

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)

"Despite opinions to the contrary, mobile web apps still feel like an excellent opportunity to offer..."

rafer — Fri, 08 Oct 2010 20:11:25 -0700

“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)

Zynga Bets on HTML5 With Dextrose Acquisition

rafer — Sun, 26 Sep 2010 15:34:18 -0700

Zynga Bets on HTML5 With Dextrose Acquisition

catharsis: The Reddit Alien in CSS (via 9-bits & css3watch)

rafer — Mon, 20 Sep 2010 20:35:50 -0700

catharsis: The Reddit Alien in CSS (via 9-bits & css3watch)

"FierceOnlineVideo: What’s one overlying trend that you can point out in the OVP segment?..."

rafer — Wed, 15 Sep 2010 16:45:16 -0700

“

FierceOnlineVideo: What’s one overlying trend that you can point out in the OVP segment?

David Mendels: A general theme that you can certainly point to is consolidation.

”

- Brightcove President David Mendels on consolidation, profitability and the future of the OVP segment’s 800-pound gorilla - FierceOnlineVideo

Rafer sez:
Tee up the next wave.

Brightcove: Online Video Discovery Shifting From Search To Social Media | paidContent

rafer — Mon, 13 Sep 2010 18:32:23 -0700

Brightcove: Online Video Discovery Shifting From Search To Social Media | paidContent

senchainc: HTML5 Sencha Touch App vs. native iPhone App side by...

rafer — Wed, 08 Sep 2010 21:23:25 -0700

senchainc:

HTML5 Sencha Touch App vs. native iPhone App side by side (HD) (via touchNOC)

Sencha Touch beta 4 (.94) was released today — Read the release notes or download it and try it for yourself.

"HTML5 Enhancements Tap in to new capabilities for your apps and sites webOS 2.0 adds a number of new..."

rafer — Tue, 31 Aug 2010 16:06:59 -0700

“HTML5 Enhancements
Tap in to new capabilities for your apps and sites webOS 2.0 adds a number of new HTML5 features and enhancements, giving you more tools to work with when building apps and sites for webOS. Highlights include: Enhanced Canvas support, including image data and gradients
Support for Web Storage—both local and session storage
Geolocation support, allowing websites to access location information with the user’s permission
Application Cache, which lets websites cache resources on the device for offline use”

- Intro to webOS 2.0 - Palm Developer Center

"U.S. pay TV subscriptions have declined for the first time in history this quarter, according to new..."

rafer — Mon, 23 Aug 2010 16:30:27 -0700

“U.S. pay TV subscriptions have declined for the first time in history this quarter, according to new data from SNL Kagan. The business intelligence company reports that cable companies lost 711,000 subscribers, which represents the biggest quarterly loss in cable TV’s history. Six out of eight cable TV operators also reported their worst subscriber losses ever last quarter.”

- New Numbers Reveal: Cord Cutting Is Real (via tedr) (via mikehudack)

"We have slow boiled so many web sites that we have turned the web into a mass of branding, redundant..."

rafer — Sat, 21 Aug 2010 13:51:06 -0700

“We have slow boiled so many web sites that we have turned the web into a mass of branding, redundant navigation and advertising.”

- THINK / Musings» Blog Archive » getting to know the iPad

Rafer sez:
#appweb I need a tag to aggregate my thoughts on “App Design will take over the desktop web.”

"To be fair, it’s not necessarily laziness per se. Your average colorist has to grade about two..."

rafer — Sat, 21 Aug 2010 08:54:00 -0700

“To be fair, it’s not necessarily laziness per se. Your average colorist has to grade about two hours of movie, frame by frame sometimes, in the space of a couple of weeks. It doesn’t take that many glances at the deadline bearing down on the calendar before you throw up your hands and say, “Fuck it. Everybody likes teal and orange!””

- 5 Annoying Trends That Make Every Movie Look the Same | Cracked.com

"Fourteen percent, or 27 million U.S. online consumers, intend to buy some kind of tablet in the next..."

rafer — Fri, 20 Aug 2010 19:52:53 -0700

“Fourteen percent, or 27 million U.S. online consumers, intend to buy some kind of tablet in the next 12 months, says a Forrester research report (.pdf) published Thursday (chart below). Customers interested in purchasing a tablet aren’t primarily Apple customers, and they’re well aware of the crop of upcoming tablets from competitors such as Google and Hewlett-Packard.”

- U.S. Customers Are Tablet-Hungry, and Not Just for the iPad | Gadget Lab | Wired.com

"Video on the web has always been a bit disappointing."

rafer — Fri, 20 Aug 2010 15:52:53 -0700

“Video on the web has always been a bit disappointing.”

- Mozilla’s Popcorn Project Adds Extra Flavor to Web Video | Webmonkey | Wired.com

Rafer sez:
Love it, so much so that we’re on the same path here at HandrollTV.