Share this project

Done

Share this project

Done
Let's Code: Test-Driven Javascript's video poster
Play

A screencast series focusing on rigorous, professional Javascript development. Read more

Portland, OR Technology
Share this project
879
backers
$39,331
pledged of $12,000 goal
0
seconds to go

Funded!

This project was successfully funded on June 5, 2012.

A screencast series focusing on rigorous, professional Javascript development.

Portland, OR Technology
Share this project

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. Creator James Shore on June 26, 2012

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

    2. 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. 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. 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. 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. 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. 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. 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. 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. Creator Carl H. Blomqvist on June 22, 2012

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

    11. 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. 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. 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. 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. Creator James Shore on June 21, 2012

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

    16. Creator Paul Young on June 21, 2012

      Any reason you're not considering Vimeo?