meemoo hackable web apps

(Ab)using html <video>

08 May 2011 by Forrest Oliphant

When I set out to write a web application for remixing web video, I did some tests and figured out that I could write it all in html+js, and it has been a great learning experience and mostly smooth. However, there are always going to be differences in browsers. While I haven't needed to write any browser workarounds (thanks to JQuery and ignoring older browsers), the <video> element works differently in the 3 browsers that I'm testing.

The main functionality of Meemoo is setting up and skipping to time-based triggers in video, which is as easy as video.currentTime = 5. Because of the different ways that browsers handle video caching, performance can be quite different.

Chrome can skip to triggers around the current playhead with great response time, but skipping backwards more than a few seconds causes a pause. Safari skips forward fine, but skipping backwards causes the video element to report itself not buffered after that time, which blocks skipping forward for a moment. Firefox with WebM video seems to be the best combination for now, with very responsive seeks all over the length of the video.

The YouTube player is Flash, and skipping feels a little less responsive than with the HTML video players, but is fast enough. Triggers close to the end of the video sometimes cause the video to rebuffer, which isn't good.

I also had a hair-pulling mystery bug that caused ghost players to be playing in the background, found a workaround.



comments powered by Disqus