Funded! This project was successfully funded on June 5, 2012.

Update #12

Video Killed the Internet*

Video sucks. Oh, sure, we've got HTML 5. We've got flash players. We've got it all, and it all sucks.

For the last week or so, I've been working on my primary risk: hosting, serving, and playing video. By my calculations, I'm serving 146 episodes (some bundled into chapters) at an average of 81MB each. Over the course of the series, I anticipate serving over 22 terabytes of video.

So video is my biggest risk. But not serving it, surprisingly... playing it.

Up until now, all my videos have been hosted on YouTube. I'm not a fan of YouTube. (Does "please die in a fire" count as "not a fan?" I dunno.) Music rights companies keep claiming that my voice on my video somehow violates their copyright. YouTube takes their bogus claims with the unquestioning acceptance of a small child. A small, deaf child. Who's been taught to take candy from strangers.

One of my videos is claimed by APM Music, with no opportunity for me to dispute the claim. It's clear that no human (or, at least, no honest human) was involved in the process. The video contains no music whatsoever.

So, yeah. Not a fan. But YouTube has one big thing going for it: they make hosting and playing videos really easy.

You'd think that, in the era of HTML 5, playing video would be simple. It's not. Here's what I want:

  • One video format. Transcoding video takes time and disk space, and each additional format requires me to take the time to figure out encoding parameters that have the right balance between bit-rate and quality.
  • Compatible with Firefox, Chrome, Safari, IE8, IE9, and iOS Safari. Android would be nice, too, but testing on that platform is ridonkulous and it accounts for less than 2% of my site visits.
  • Works when Javascript is disabled (for example, in an RSS feed).
  • Quality look and feel.
  • Full-screen support.
  • Ability to start playing the video before it's fully loaded.
  • Support for seeking, even to parts of the video that haven't been loaded yet.
  • Video still looks good when scaled to less than 100%.

Individually, these requirements are reasonable. Obvious, even. Together, they sing the song that ends the earth.

I started out with the excellent VideoSWS site, which summarizes dozens of HTML 5 video players. "SWS" stands for "See What Sucks," and originally I thought that was just an amusing bit of hyperbole. Later I realized it's actually tastefully understated commentary.

VideoSWS has seven players starred as "sucks less." I tested each of them.

  • Sublime didn't do fullscreen on IE8 or IE9.
  • jMediaElement required me to use a right-click menu to get full-screen video.
  • JWPlayer choked when repositioning on Firefox.
  • MediaElement didn't perform well on iPad, and was flaky on IE8.
  • Projekktor didn't work on Safari, even though it did work on Chrome.
  • VideoJS was actually pretty awesome, but I've had some trouble with it in the past.

Eventually, I settled on MediaElement as the best of a bad lot, and started testing it with my own 26-minute video. That's when I realized I'd barely begun the pain.

I won't bore you with the details. Except this one, as a representative sample: to get video to play before it's fully loaded, the MOOV atom has to be moved to the front of the video using qt-faststart, which comes with ffmpeg, and on the Mac, you install ffmpeg using Homebrew, except you have to use the undocumented --with-tools command-line parameter to get qt-faststart as well. That bit of loveliness took me several hours to figure out.

In the end, I learned an important lesson. None of the HTML 5 video players I tried, not a one†, has cross-platform support for seeking to parts of a video that hasn't loaded yet. In Flash (required for IE8 support and Firefox MP4 support), you have to use something called pseudostreaming to get that ability. My awesome video host does support pseudostreaming, but the players' Flash fallbacks don't.

So it was back to the drawing board. FlowPlayer supports pseudostreaming, but only with a plugin, and it's Flash-based with an HTML 5 fallback that only engages on iOS. After much struggling, I got it to work, and now I've actually got video working on all platforms. It requires Flash to be installed (except on iOS), but at this point I'm throwing in the towel on HTML 5 video. I may revisit the video player quagmire in the future, but now that I've got something working and cross-platform, it's time to focus on my other biggest risks.

†Actually, in preparing this update, I took a second look and found that JWPlayer does support pseudostreaming after all, and I haven't been able to reproduce the "chokes on repositioning in Firefox" problem I saw the first time I tried it. And it works when Flash isn't installed, unlike FlowPlayer. So I might give it a try.

The one bright spot in all this has been SendFaster. Christopher at SendFaster is a backer, and he contacted me out of the blue asking if I needed geobalanced video hosting. I said, "why-yes-I-do." His company makes TCP acceleration and video streaming software and serves hundreds of thousands of video streams every day. His email couldn't have come at a better time, and SendFaster has been a pleasure to work with. We're getting a load test set up and I'll send out another update when it's ready for y'all to pound on.

TIMELINE UPDATE

At this point I'm showing about a 50/50 chance of hitting my July date. (I've got a Rabu chart up that shows my projections, if you're interested. That link doesn't work in IE.) That's not including web design, which is my new biggest risk. I've contacted several of the many great web designers who responded to my survey, and I'm hearing concerns about the short timeframe.

So I'm currently debating whether or not to go live with my own crappy design, then upgrading later, at the risk of making a poor first impression... or postponing the launch of the site until August and giving web design more time. I'm still waiting to hear from a few designers, so I'm going to make that decision at a later responsible moment.

Five Things I've Done Since the Last Update

  • Arranged video hosting with SendFaster and set up a video testbed.
  • Chose video player and tested it.
  • Re-chose video player and tested it.
  • Re-re-chose video player and finally got something working.
  • Started bidding process with web designers. If you provided your portfolio on the survey, thank you! I reviewed every response and ultimately contacted five people. If I didn't contact you, it's because I had a surplus of good choices.

*Pronounce this update's title by singing. "Video killed the Internet star, video killed the Internet star..."

Comments

    1. Headshot-print-bw.small

      Creator James Shore on June 26, 2012

      @Rod I agree. I think it's better to get the videos out there than wait.

    2. Missing_small

      Creator Roderick Ross on June 26, 2012

      Hi James,

      I am not sure what people have commented so far regarding needing a polished site for a good first impression, but our selfish needs would be to get the training material even if the site is simple and unpolished.

      Regards
      Rod

    3. Headshot-print-bw.small

      Creator James Shore on June 22, 2012

      Thanks for your comments, everyone. One thing I've learned from working on this is that there are a lot of approaches that look simple and easy when you start out, but actually turn out to be difficult or completely unworkable in practice. For example, just using video tags with a Flash fallback seems like the most straightforward approach, until you learn that Chrome's default player doesn't have a full-screen button. (At least, it didn't in April.)

      With regards to hosts, I'm pretty happy with SendFaster and I'd rather not switch. They let me upload video in my own format (which means I have control over encoding quality) and they let me automate with standard Unix tools like ssh and scp.

      I have to admit to being skeptical about Vimeo's pricing. I'm serving about 5TB of video a month, and that's in the top tier for most of the video providers I looked at. Vzaar, for example, charges $499/month for that amount. Vimeo charges $199/YEAR. What do you sacrifice for that great rate? Does Vimeo embed ads? Transcode to lower quality? Subsidize rates for reasons of their own? Or are they just that much better than everyone else?

      So I guess what I'm saying is that nothing is as simple as it seems. I don't know the right answer, but in a week of working on this, I've learned that there's a lot of wrong answers. (And I do have something that seems to work now, even if it isn't perfect.)

      Cheers,
      Jim

      PS: @Colin, thanks for the APM Music email. I'll give it a try.

    4. Mig_daah.small

      Creator Markus Krogh on June 22, 2012

      Gah the biggest problem however with Vimeo is that their player lacks "jumping", i.e. seeking beyond what the player have loaded is not supported.

    5. Mig_daah.small

      Creator Markus Krogh on June 22, 2012

      As Paul Young says, when using Vimeo Pro you can keep the video private from public, and specify which sites they may be embedded on. You can then embed it on http://www.letscodejavascript.com, where you can access protect the page showing the video.. Should be quite simple.

    6. Fb_profile_picture.small

      Creator Colin Blair on June 22, 2012

      For your YouTube video, I found an email address for APM where you can contact them directly: ContentID@apmmusic.com

    7. Foto_stefan.small

      Creator Stefan Mensink on June 22, 2012

      Yep, personally I'd be happy enough if downloading was the only option. That way video's can be watched on a laptop/tablet while travelling.

    8. Missing_small

      Creator Evgeni Dzhelyov on June 22, 2012

      I don't get why you don't record in mp4 and upload the videos for download. The guy at destroyallsoftware.com does that, I think he uses amazon EC2 for that, and everything works fine.

    9. Bolr06_72ppi.small

      Creator Roland Bole on June 22, 2012

      try the Flash Media Playback player http://www.adobe.com/products/flash-media-playback/features.html,
      it works perfect for us

      >>Ability to start playing the video before it's fully loaded.
      http://renaun.com/blog/code/qtindexswapper/

      for mp4 files

    10. Fb_profile_picture.small

      Creator Carl H. Blomqvist on June 22, 2012

      Yeah, check out Vimeo Plus, bitgravity.com and cachefly.com.

    11. Fb_profile_picture.small

      Creator Hardeep Singh on June 22, 2012

      Oh, and generally the best way to go about things (at least, I find...) is exporting to f4v (flash video) from your video editing program of choice, and then uploading that. This way, the hosting company will not have to transcode it for flash video. And Vimeo takes care of the transcoding for you, in case someone wishes to use their HTML5 viewer instead.

    12. Fb_profile_picture.small

      Creator Hardeep Singh on June 22, 2012

      Vimeo can also restrict videos to other, specific, vimeo users only. If you so choose...

      And yea, with vimeo plus, you can disable the vimeo.com video entirely, and set it so it can only be embedded from your own personal web page (domain-based filtering I think it was). Then, if you have some sort of user system on your own website, you're pretty much set for being able to restrict access. No need to mess with the API, it's all done through their settings panel.

    13. Photo.small

      Creator Paul Young on June 22, 2012

      This might help. Vimeo Plus:

      "Choose exactly where your videos can be embedded on the web. There are no limits to the number of websites you can choose and you'll always have complete control of your video outside of Vimeo. You even have the option to completely hide your video on Vimeo.com so it will only show up on the sites you want it to, and nowhere else."

    14. Rob_sutherland.small

      Creator Rob Sutherland on June 21, 2012

      I think you're right about the videos on Vimeo - however using their API you may be able to do something. Not let the videos play on Vimeo site, but allow them to play on your custom pages. Don't know, just a thought. I've only toyed with the Vimeo API.

      I use Zencoder to transcode my videos. That's pretty dang easy while still being affordable. I transcode to the native format for iOS, Firefox, and Chrome. Then I just use the standar HTML5 video element with a Flash fallback for the (cough) browsers that don't support HTML5 video. I let the browsers do the work. I got tired of all the javascript required jquery, etc plugins to do video when most of it can be done simply by using HTML code.

      But I'm no expert. I just tend toward the simple.

    15. Headshot-print-bw.small

      Creator James Shore on June 21, 2012

      @Paul I'm pretty sure I can't restrict access to videos on Vimeo.

    16. Photo.small

      Creator Paul Young on June 21, 2012

      Any reason you're not considering Vimeo?

879
Backers
$39,331
pledged of $12,000 goal
0
seconds to go
  • Pledge $5 or more
    You selected

    3 backers

    BUY ME A BEER: You love the idea, but you don't want the videos. That's okay. I'll toast you as I drink one of Portland's fine microbrews.

    Estimated delivery:
  • Pledge $10 or more
    You selected

    30 backers

    FIRST MONTH: Get the first 8 "Live" & "Caffeinated" episodes and the first 2 "Lessons Learned" episodes. Viewable on the web & downloadable. DRM-free. Source code included.

    Estimated delivery:
  • Pledge $25 or more
    You selected

    190 backers Limited (10 left of 200)

    STARVING STUDENT: You are starving and/or a student. Get the whole series: 32 "Live" & "Caffeinated" episodes and 8 "Lessons Learned" episodes. Viewable on the web & downloadable. DRM-free. Source code included. HONOR SYSTEM: Please save this reward for the people who really need it! I won't be checking up on you, but you'll know if you cheated. AND YOU'LL FEEL BAD ABOUT IT.

    Estimated delivery:
  • Pledge $35 or more
    You selected

    321 backers

    FULL SEASON: Get the whole season: 32 "Live" & "Caffeinated" episodes and 8 "Lessons Learned" episodes. Viewable on the web & downloadable. DRM-free. Source code included.

    Estimated delivery:
  • Pledge $40 or more
    You selected

    265 backers

    EARLY ACCESS: Get access to videos as soon as they're ready! Regular viewers will get videos on a set schedule (such as one every Tuesday and Thursday); you'll get to see them the instant they're uploaded. Includes the whole season: 32 "Live" & "Caffeinated" episodes and 8 "Lessons Learned" episodes. Viewable on the web & downloadable. DRM-free. Source code included. NOTE: videos will be recorded & uploaded in batches, over the course of several months.

    Estimated delivery:
  • Pledge $50 or more
    You selected

    21 backers

    HELP OUT A STUDENT: You get the "Early Access" reward AND I use the extra $10 in your pledge to make another "Starving Student" registration available. NOTE: This reward is automatically included with all "Early Access" rewards of $50 and more. I increase student registrations manually, so please allow up to 24 hours for new student registration slots to appear.

    Estimated delivery:
  • Pledge $75 or more
    You selected

    10 backers

    SITE SOURCE CODE: You get the "Early Access" reward AND you also get the source code to the LetsCodeJavascript.com web site. This is in addition to the source code that comes with the screencast. NOTE: This reward is also bundled with all "Early Access" rewards larger than $75. Some third party code may not be included, depending on license restrictions, and art assets are not included. No support is included.

    Estimated delivery:
  • Pledge $100 or more
    You selected

    11 backers

    GARAGE STARTUP (3-USER PACK): You and two of your best buds are going to change the world. To help you do it, you get three transferable logins for the "Full Season" reward.

    Estimated delivery:
  • Pledge $105 or more
    You selected

    15 backers Limited (35 left of 50)

    SIGNATURE EDITION: Get a signed copy of my book inscribed with a personal thank-you message, AND the "Early Access" reward. US shipping included. Add $10 for international shipping.

    Estimated delivery:
  • Pledge $250 or more
    You selected

    2 backers Limited (14 left of 16)

    SPONSOR AN EPISODE: I'll give a shout-out to you and your peeps at the beginning of a "Live" episode of my choice, including an NPR-style (brief & not excessively commercial) mention of your favorite product, company, or charity, AND you also get the "Early Access" reward.

    Estimated delivery:
  • Pledge $250 or more
    You selected

    2 backers

    TEAM ROOM (8-USER PACK): Your team is rocking the Javascript. Now you get some rockin' videos, too. You get eight transferable logins for the "Full Season" reward.

    Estimated delivery:
  • Pledge $500 or more
    You selected

    0 backers Limited (3 left of 3)

    SPONSOR A LESSON: I'll give a shout-out to you and your peeps at the beginning of a "Lessons Learned" episode of my choice, including an NPR-style (brief & not excessively commercial) mention of your favorite product, company, or charity, AND you also get the "Early Access" reward.

    Estimated delivery:
  • Pledge $625 or more
    You selected

    1 backer

    FUNDED STARTUP (21-USER PACK): Bubble? What bubble? You're living the dream! And what better way to live than with some sweet, sweet Javascript videos. You get 21 transferable logins for the "Full Season" reward.

    Estimated delivery:
  • Pledge $850 or more
    You selected

    0 backers Limited (3 left of 3)

    AN EVENING OUT: I'll treat you and your guest to an evening of fine dining and conversation at one of Portland's best restaurants. You also get the "Early Access" reward. NOTE: Travel to Portland is not included.

    Estimated delivery:
  • Pledge $1,000 or more
    You selected

    0 backers Limited (3 left of 3)

    BE A STAR: Appear as my remote pair programming partner on up to four consecutive "Live" videos AND get the "Early Access" reward. (Be sure you have time free this summer for recording.)

    Estimated delivery:
  • Pledge $1,500 or more
    You selected

    0 backers

    GOING CONCERN (55-USER PACK): You're pros. And pros know that coordinating large teams takes serious software development chops. These videos will help. You get 55 transferable logins for the "Full Season" reward.

    Estimated delivery:
  • Pledge $5,000 or more
    You selected

    1 backer Limited (2 left of 3)

    THE PERSONAL TOUCH: I come to your site and spend a day with your team(s) discussing Agile or Javascript-related topics of your choice. We'll create the agenda in advance; options include speaking, consulting, and coaching. AND you also get 21 transferable logins for the "Full Season" reward. PLEASE NOTE: Travel expenses are not included and will be billed separately. This reward is non-refundable but I will happily delay or reschedule as your business needs dictate, subject to mutually agreeable timeframes in the future.

    Estimated delivery:
Funding period

- (22 days)