This little “poor-developer filter” was discussed and solved many times.

Despite the number of discussions it spur, and the many suggested ways to solve the problem, the question regarding which solution would be the most efficient, remained unclear. Maybe because its original goal was to screen “bad” developers rather than actually solve the problem efficiently or demonstrate creativity. It was also said that during an interview, solving the problem in more efficient less readable manner would disqualify the developer.

The FizzBuzz problem seems so naive and simple to solve, that it becomes an even more intriguing task to optimize it. So I’ve looked around the various suggestions (more than 80 languages!), and isolated the key ways to solve the problem. Then I added a simple timing and below are the results. Which FizzBuzz solution is the most efficient?

It seems that there are 4 main patterns to solve the FizzBuzz problem:

1. Using modulo and int equality test.
2. Using modulo and string equality test.
3. Count 3 and 5 down or up as i progress (testing counts of 3 and 5).
4. Using some bitwise trickery.

I’m using C# in the implementation example, yet the above methods apply to all languages (possibly languages will deffer being better than others comparing ints vs. comparing strings).

As shown below, the most effective methods were the ones with: 1. the least int equality tests, and 2. those using less modulo.

The most efficient? we almost have a tie between the following 3 marked in yellow.

Comparing int values (in loop), using 4 (in loop) modulo operations and chained if..else:

1
2
3
4
5
6
7
8

for (int i = 1; i < = N; ++i)
{
    if ((i % 3 == 0) && (i % 5 == 0)) result += "FizzBuzz";
    else if (i % 3 == 0) result += "Fizz";
    else if (i % 5 == 0) result += "Buzz";
    else result += i.ToString();
    result += ", ";
}

Comparing int values, using 2 (in loop) modulo operations and 4 (in loop) int equality tests:

1
2
3
4
5
6
7
8

for (int i = 1; i < = N; ++i) {
    f = i % 3;
    b = i % 5;
    if(f == 0) result += "Fizz";
    if(b == 0) result += "Buzz"; 
    if (f > 0 && b > 0) result += i.ToString();
    result += ", ";
}

Comparing strings, using 2 (in loop) modulo operations:

1
2
3
4
5
6
7
8

for (int i = 1; i < = N; ++i)
{
    outp = "";
    if (i % 3 == 0) outp = "Fizz";
    if (i % 5 == 0) outp += "Buzz";
    if (outp == "") outp = i.ToString();
    result += outp + ", ";
}

Counting up, using 2 single (out of loop) modulo operations:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

int x = 3;
int y = 5;
int a = 1;
b = N;
int x1 = a % x;
int y1 = a % y;
result = "";
for (int i = a; i < = b; i++)
{
    if (x1 == 0) result += "Fizz";
    if (y1 == 0) result += "Buzz";
    if (x1 != 0 && y1 != 0) result += i.ToString();
    result += ", ";
    x1 = (x1 == x - 1 ? 0 : x1 + 1);
    y1 = (y1 == y - 1 ? 0 : y1 + 1);
}

Counting down, using no modulo operations, chained if..else:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

int fizz = 3;
int buzz = 5;
for(int i = 1; i < = N; ++i) {
	fizz--;
	buzz--;
    if (fizz == 0 && buzz == 0)
    {
		outp = "FizzBuzz";
		fizz = 3;
		buzz = 5;
    }
    else if (fizz == 0)
    {
		outp = "Fizz";
		fizz = 3;
    }
    else if (buzz == 0)
    {
		outp = "Buzz";
		buzz = 5;
	} else {
		outp = i.ToString();
	}
	result += outp + ", ";
}

All Bitwise operations (using predefined 0-15 numbers mask):

1
2
3
4
5
6
7
8

string[] messages = new string[]{null, "Fizz", "Buzz", "FizzBuzz"};
int acc = 810092048; //11 00 00 01 00 10 01 00 00 01 10 00 01 00 00
int c = 0;
for (int i=1; i < = N; ++i)  {
    c = acc & 3;
    result += (c > 0 ? messages[c] : i.ToString()) + ", ";
    acc = acc >> 2 | c < < 28;
}

@Download the full C# code

Can you find a more efficient way?

[http://www.virtualshackles.com/275]

Need a quick, easy and free way of cleaning up a video’s audio from background noise? Follow the steps below.

First get and install the tools:

• FFMPEG.
• SoX – Sound eXchange.

Then clean your noise!

1. Split the audio and video streams into 2 seperate files:
   The VIDEO stream: ffmpeg -i input.mp4 -sameq -an tmpvid.mp4
   The AUDIO stream: ffmpeg -i input.mp4 -sameq tmpaud.wav 
2. Generate a sample of noise from the audio of the file:
   ffmpeg -i input.mp4 -vn -ss 00:00:00 -t 00:00:01 noiseaud.wav
   -ss: the time offset from beginning. (h:m:s.ms).
   -t duration: record or transcode duration seconds of audio/video.
   Choose a segment of the audio where there’s no speech, only noise (e.g. speaker was silent for a sec).
3.  Generate a noise profile in sox:
   sox noiseaud.wav -n noiseprof noise.prof
4. Clean the noise samples from the audio stream:
   sox tmpaud.wav tmpaud-clean.wav noisered noise.prof 0.21
   Change 0.21 to adjust the level of sensitivity in the sampling rates (I found 0.2-0.3 often provides best result).
5. Merge the audio and video streams back together:
   ffmpeg -i tmpaud-clean.wav -i tmpvid.mp4 -sameq vid.mp4

An app I wrote needed the following features:

1. Application has to run in the browser as a SWF.
2. Application will run in filesystem mode (file://).
3. Application will not have server side (except for YouTube).
4. Application will have to login to YouTube using ClientLogin instead of AuthSub to avoid redirects.
5. Application will have to upload a manipulated ByteArray, not directly from FileReference.browse().

So, I turned to the YouTube API docs, looked at the PHP implementations and the result is this class which I’m sharing with you now.

Introducing: YouTubeDirectUploader.as – A utility class for uploading to YouTube using email and password.

The class provides two methods of uploading:

1. Using FileReference and browse() – which will opt the user to select their video to upload.
2. Using a ByteArray – which allows the Application to manipulate the FLV before uploading to YouTube (what was needed in my case).

It was also designed to be used as a declared object in MXML, just to ease the use and allow bindings to form elements.

Another sleepless night… Got some new features to FLVWizard, there are now new functions to:

• Slice / Trim video.
• Sequence a vector of FLV ByteArrays.
• Minor things.

Check out the source code for ClippingApp, a small app that allows clipping and sequencing of clip’s parts.
More to come…

Been a while now since I’ve last opened my Adobe Flex Builder and wrote some AS3…

Working on the  Gendered Advertising Remixer a while ago, made me curious again about whether it will be possible to merge the video & audio channels of given FLVs in run-time on the client-side (in AS3). So I’ve decided to take a few hours this weekend to add a download option to the GAR : )

At Kaltura, we’ve used to do this server side for creating video remixes. The video editors were written in Adobe Flex, targeting Flash 9.0. When-ever a video trimming or merging was needed, the editor would have send a request to the server, then download a whole new video stream. This not only makes poor experience since the user has to wait for videos to download, but it also gets costly as bandwidth consumption grows as well as making it a messy deployment.

A 1.1 version later, Flash 10.1 introduced NetStream.appendBytes() – the ability to push a ByteArray containing FLV bits down the NetStream playback throat. Wonderful! now all I need the server for is to host my videos, all trimming/merging work can now be done on the client computer, all in ActionScript3.

Manipulating bits by the FLV spec

Reading through related posts on the web, I’ve found Thibault Imbert’s FLVSlicer at ByteArray.org. FLVSlicer was a great start – it showed an easy way of slicing through FLV frame-tags and merging slices of the same video.

FLVSlicer was missing 2 pieces important to my desired GAR implementation:

1. Easily split audio and video channels, and merge audio and video channels to a new video.
2. Perform all operations on FLVs that are not necessarily the same original FLV (In GAR we merge 2 different videos).

Additionally, I wanted to loose the complex object oriented approach taken in the FLVSlicer. Even though OO might make sense in simplifying complex architectures, I’ve found that in this specific case, it only added unneeded fat to the utility. FLVSlicer seemed to have been built with scale-ability in mind, defining events and separating objects for Slices… maybe for more complex situations like manipulating very long videos, it will be right to go back to this architecture and implement an asynchronous merging/trimming algorithms.

FlvWizard - Utility class for manipulating FLV bits

Re-implementing Thibault’s FLVSlicer, I’ve create FlvWizard. Answering the two needs above and merged into a single class that gets FLV ByteArrays as input and spits FLV ByteArrays as output. No need for more objects, output is ready to be served as is, into the NetStream.appendBytes() function.

1
2
3
4
5

var flvwiz:FlvWizard = new FlvWizard ();
videoBytes = flvwiz.extractChannel(boyVideo, FlvWizard.VIDEO_CHANNEL);
soundBytes = flvwiz.extractChannel(girlVideo, FlvWizard.SOUND_CHANNEL);
mergedBytes = flvwiz.mergeChannels(videoBytes, soundBytes);
ns.appendBytes(bytes);

Currently capable of splitting audio and video channels, and then merging channels into a new video. Followup in the next post when I’ll extend it further to enable easy client side trimming and sequencing of given videos.

Try it out with this little demo

Follow the numbers (1. Click to watch original Boys video, 2. Click to watch original Girls video, 3. Click to merge video from Boys and audio from Girls and watch the merged Flv, 4. Click to save the merged Flv to your disk).

Find the source code at GitHub.

What’s next?

Even though this provides a great solution for the GAR project needs, and even for most smaller remixing use-cases, I find this not satisfying. A better way should be hacked to:

1. Allow manipulation and streaming of h264/webm and not just FLV. The problem with this at the moment is that appendBytes() only handles FLV.
2. Better performance so that we can handle long video sequences.
3. Further manipulation of the actual FLV tags – Allowing trimming in between key-frames.
4. Encoding of effects and overlays on top of the video. (Lee Felarca’s FLV Encoder might be a good start).

Maybe an alchemy port for an h264/webm/flv codec be a good direction? Or a full ffmpeg port?…

Many thanks to StreamingMedia.com for inviting Michael and me to speak about HTML5 and our adventures with creating the Kaltura HTML5 Media library.

Now that Streaming Media Europe and West HTML5 Media Workshops are over (and that I’m back home), as promised, here are the slides and some answers to common questions. Slides: HTML5 Streaming Media West Workshop 2010

This post is about the current state of HTML5 Media, links to resources about the Kaltura HTML5 Media Library, answers to the common questions from the workshop and some of my own personal view.

-

General note: “HTML5 is ready to rock!”

It is, almost all the new features are deployed across all major browsers (YES! including Microsoft IE), new devices will ship with browsers ready for HTML5 and we have almost all features defined and ready to go.

But it will take long to mature…

Yes, it is also not complete yet. Just like a newborn, the new features with version 5 of HTML will take some time to stabilize, grow and mature.
The spec & implementations need to be finalize and get fully compatible across all browsers. The authoring tools are starting to show (Cooties, HTML5 for Illustrator, Dreamweaver HTML5 Pack, Adobe Edge, Flash to HTML5…), nevertheless, it will take these a while to get to the level of Flash IDE. And unfortunately, it doesn’t seem like we’re going to have a solution for old browsers soon as adoption is sooo slooooww… (Maybe we should write a worm that upgrades old browsers… err)

There’s a great post by Craig Buckler demystifying much of the latest confusion of “HTML5 ready or not” debate: The W3C and the “HTML5 Isn’t Ready” Backlash. While I agree with most his notes, I found the 2 comments below somewhat lacking:

• “Interoperability always has and always will be an issue…” – While it’s true that it has always been a pain, this is due to the way browsers were made. Part of what made Flash so successful was its ability to provide a “write once deploy everywhere” solution, and more so, it’s ability to update and fall-back very well. I don’t think there will be many reasons for companies, website creators to make a business decision to prefer pure HTML5 Media adoption if cross-browser experience support stays awkward. Instead, except for where HTML5 is a must (iOS), we’ll use Flash.
• “…but there’s little to stop you writing HTML5 code today” – This is just an overlooking of what HTML5 Canvas, Video and the addition of SVG and JS control on these means. It’s true that to write HTML you don’t need more than a text editor. But you don’t expect designers to create rich-user-interfaces and animations just by writing code… The lack of good Authoring Tools slows down the ability of designers to create great content. The alternative is yet again Flash IDE, which hopefully materialize the promise of JS, Canvas and SVG export.

-

Streaming Media West Workshop Discussion [[Download The Slides]]

The live discussion with developers and users of online video during the workshops made it clearer – the 3 outstanding questions are:

1. Does feature parity with Flash media exist? (Adaptive, live, drm, performance, etc.)
2. Backward support.
3. Performance.

So why is it such a big buzz?

This yields another question, how can HTML5 make such a big noise, while none of the above questions can positively be answered today?
Truth is, HTML5 have been fortunate enough to gain Apple’s push, excluding Flash from the iOS devices.

So considering the above general points, let’s try to answer in more details.

Who’s using HTML5 <video> today?

• Video Hubs: YouTube has a trial for HTML5, it is not clear when or if they’ll make it default choice. Same for Vimeo, Dailymotion…
• Content Sites: CNN, New York Times, ESPN, The White House, Flickr, National Geographic, and others.
• More sites can be found on http://html5gallery.com

Note there are no Hulu or NetFlix on this list…
Part in beta part production – HTML5 video is definitely already in use by leading websites. So it is just a matter of time… let’s look at the features:

Starting with the hardest – DRM

As it faces growing interest from the media world, there still 1 main are that left open – the way to protect ones content.
According to the W3C HTML5 FAQ, current approach that seem to be taken by the standard is of a bystander waiting for the various stakeholders (members of W3C; browser makers, etc.) to decide among them on a unified solution, what seem to be unlikely to ever happen due to the nature of DRM;

Evil or not, mathematically impossible or not, DRM is a solution currently forced upon premium content networks like Hulu and NetFlix. It looks as if DRM will not be made possible across browsers, premium sites will have to rely on alternatives like Flash and Silverlight, or carefully chose their target audience based on available DRM technology for HTML5.

Interesting discussions on the topic can be found on the W3C issue queue and lists.

Live streaming and Adaptive bitrate

Possible on Apple’s HTTP Live Streaming and via VLC. The standard, doesn’t constrain upon content length, thus making live broadcasting possible, combined with chunking the stream this makes simple HTTP Adaptive Streaming. Additionally, groups like FOMS (Foundations of Open Media Software) and IETF (Internet Engineering Task Force) are developing solutions for better adaptive streaming. That said, the spec does not define any specific details for adaptive or live broadcast, so we’re about to face different solutions and different implementation details.

Hopefully, the standard for Media Fragments:

“Davy is looking for videos about allergies and would like to get previews at a lower frame rate to decide whether to download and save them in his collection. He would like to be able to specify in the URI a means of telling the media server the adaptation that he is after. For video he would like to adapt width, height, frame rate, colour depth, and temporal subpart selection.”

…there would be a standardized way to communicate between the client and the server asking for specific parts or specific playback flow of a media asset.

The Video Codec War

Browser wars? IE6 special HTML?… Now we have it the video way – The standard don’t and isn’t going to in the near future define a must have common base codec. What it does instead is providing a graceful fallback option using the <source> tag. Not the end of the world considering you only need two codecs today: h264 and webm or h264 and ogg theora. And if you’re using Flash or Silverlight as your fallback, h264 is enough (iOS will play it using HTML5 based on built-in QT and Flash on all the other devices/browsers).

Performance

With latest GPU additions to Flash Player and other plugins, video is really not a cpu hog anymore, what seem to soon be the case with all HTML based video too - As all browsers are going to have GPU acceleration soon (if not already), Safari and IE will both have it in the underlying OS video rendering, Mozilla will be utilizing the GPU soon and so is Chrome.

-

Let’s build an HTML5 <video> Player. What should I know?

If you don’t have to, don’t. At least till early 2012 after comments phase is over upon the May 2011 future released final specification, Flash is easier and the only true cross-browser experience. Even then, we will still have issues with backward compatibility; unfortunately, browser adoption rate is very slow.

But you want iOS playback too… So you’re left with JavaScript solutions to do the calculated fall-back/forward and somewhat unified cross-browser experience.

Here are some pointers when you choose to deploy your HTML5 player:

1. Codecs are not that big deal – To be honest, if you choose to use Flash as the default, and HTML5 just for iOS, then h264 is all you need.
2. Though, playback quality and bandwidth usage are bit more complicated. Whether you use HTML5 or not, different devices have different screen sizes and bandwidth varies from place to place. This requires different video flavors for best experience. You can transcode the videos and specify various <source> tags, but how does the browser choose between mp4 for iPhone, mp4 for iPad and HD mp4 for TV? -Use JS to identify the device and use the right <source> accordingly.
3. Every browser has it’s controls, it’s ugly, and you need your own unified branded player UI. Simple: Use HTML for the UI, standard clean HTML4 elements. Use Flash as black box replacement for to cover up for non-HTML5 browsers.
4. If you need DRM – go Flash or Silverlight.
5. Advertising is possible, but not entirely; some devices don’t support overlays that well, especially not with full-screen, and JS based video advertising doesn’t really make sense when simple grease monkey scripts can automatically strip it out…
6. Sharing is not straight forward. With Flash you only had to copy one <object> or <embed> tag. Sometimes our player will have many lines of code… The easy way – use iframe.

-

JavaScript mixes Flash and HTML5 for truly cross-browser/device experience: Kaltura’s HTML5 Media Library

HTML5 and Flash hybrids are the solution to this mess, for now. My currently preferred way: HTML for the UI, Flash as the default playback and HTML5 <video> for the iOS. Throw a Kaltura server (CE v3.0 is out! and available as free public AMI too!) on the back end, providing the encoding and management service for the various devices out there and you’re all set to go. On devices where no Flash or HTML5 exist – the library shows a direct link to the supported video format (usually 3gp).

Moreover, the library aims to solve the problems of easy embedding through the use iFrame encapsulation and API bridging, VAST integration for advertising, integrated plugins, custom skinning (either via ThemeRoller and jQuery or event binding to DOM elements) and more…

Learn more at Kaltura.org - Kaltura HTML5 Video Media JavaScript Library

-

More advanced use cases… Let’s explore Wikipedia

About 2 years after the early announcement about getting video on Wikipedia and a year and half after the project launched, it is now showing fruits. As we keep pushing the bar of HTML5, this project aimed from the very beginning (long before many have heard of the HTML5)  to create a fully functional collaborative online HTML5 based video editing system complete with audio and video tracks, transitions, effects and more. The Kaltura HTML5 Sequencer, developed as part of the Kaltura HTML5 Media Library is a great proof of the underlying potential of HTML5 media. Try the Sequencer here.

After blurb…

In this post I tried to focus mainly on the one specific controversial <video> tag and its aspects. HTML5 and the even wider HTML.next define a much larger set of tools that will change the online experience. We are now standing upon a new web, where semantic, media and applications are blending together with the physical world (devices), and a new mesh is to be created.

If you’ve read so far, thanks (!). Let me know what you think below.

Re-iterating what took too long (couple of hours) to pinpoint and solve.

Getting ImageMagick (Imagick) installed on XAMPP 1.7.3 has it right there and clear, If you want to get Imagick installed on XAMPP 1.7.3, you’d need to:

1. Install the LATEST OFFICIAL version of ImageMagick from http://www.imagemagick.org/script/binary-releases.php#windows . (I first tried installing the one from http://image_magick.veidrodis.com/image_magick/binaries/ specified in the post above, didn’t work here as it’s missing a required DLL).
   Download the Win32 dynamic at 16 bits-per-pixel version.
   Make sure it’s installed in a simple non spaces folder name, e.g. C:\imagemagick .
   During installation, make sure you check the box for “Add application directory to your system path” (otherwise make sure to do this manually).
2. Download the following DLL – php_imagick.dll courtesy of http://www.sk89q.com (original link).
   Place this file into your php\ext folder inside xampp, e.g. C:\xampp\php\ext .
3. Edit php.ini (C:\xampp\php\php.ini) and add the following line: extension=php_imagick.dll
4. RESTART windows. (If you won’t, you might receive the following error: The program cannot start because CORE_RL_wand_.dll is missing from your computer.
5. Start Apache. it should work well.

Thanks to jerodmoore.com I can now run a fully functional Drupal 7 on xampp on Win7.

Coming from the Flash world, where the community has a voice and there’s a name & address assigned for every complaint – existing state of things with HTML5 as an Open Standard just doesn’t make much sense.

True, Flash wasn’t that visible – but, they (MM/Adobe) still made sure to listen and improve upon the community’s demand, keep a system.
Flash is truly cross-platform “write once deploy all” solution that just works, there are great solutions for designers as well as developers (latter can be improved).

Many would see my point of view as an anti-HTML5 pro-Flash developer. Let me correct this:
While today Flash provides the only available cross-platform-device solution for online media, HTML5+JS+CSS3 answers to the lack of visibility and openness as well as a true native browser technology that Flash lacks. As developers we are commuted to provide the best solution to the client requirements regardless of what technology is being used.
Open Source is my native choice, not because of it being at the price of 0 (usually) nor because of its “underground aura” – But because of its visibility, openness and ability to generate global consensus due to having all facts revealed.

HTML5 is being controlled and lead by a consortium of major companies & organizations – not by a community.
HTML5 promises is to be open and agreed-upon, however the reality is the opposite: no agreement, no single implementation that will just work the same everywhere and no single place that provides visibility on the process. Just half-results published on the W3C site when things are finally ironed out, and implementation on the browser side is not even being discussed, so using the same HTML5+JS+CSS script will not necessarily provide the same result across all browsers/devices.

Until the browser creators and many member organizations on the W3C will agree on things like codecs & implementations we will not have a true cross-platform-device Open Standard, and we as web developers will still have to rely on weird hacks to solve cross-platform issues.

As web developers, we should make the noise and send the message to the standard creators and browser makers: This time work together! We want to write HTML+JS+CSS once, and no dirty hacks!

HTML5 rocks! Please do it right this time.

Now on the technical side.
In order for HTML5 to truly replace Flash in the kingdom of multimedia, there must be solutions for all 3 below:

1. Cross-Platform-Device (‘nuogh said).
2. Hardware accelerated optimized run-time – Games & RIA’s must be responsive. This is not 1990, we want to use vector graphics, great filters & display-list architecture that allows easy to understand and manage z-ordering.
3. Authoring Environment – The fact that SVG can be used to create kick-ass vector illustrations and some animation is not enough, designers usually don’t write code. Major part of the success Flash has is attributed to the great designer and designer-developer workflow tools that MM/Adobe created. For HTML5 to provide a true alternative, solutions like the Flash IDE will need to be created (or the Flash IDE will start exporting to HTML5+SVG).

OSCON Interview:

The Prezi from OSCON Future of HTML5 Multimedia (Flash Developer Part):

Register by August 1st for early bird rates!

About OVC
The Open Video Conference (OVC) is a multi-day summit of thought leaders in business, academia, art, and activism to explore the future of video on the web. Join us October 1-2 for two days of learning and inspiration. And stick around for the OVC hack labs, presented in partnership with NYU ITP.

Who’s coming to OVC?
Connected creatives, technologists and businesspeople of all stripes. Over 100 open source projects. Innovative filmmakers. Visionaries like Tim Wu, cultural anthropologist Michael Wesch, former Obama adviser Susan Crawford, and Damian Kulash of OK Go.

OVC partner organizations include Creative Commons, the Workbook Project, Intelligent Television, Columbia Center for New Media Teaching and Learning, the Electronic Frontier Foundation, and more.

Sponsor application deadline (go here for more)
If your company or organization is interested in supporting the Open Video Conference, please be in touch by August 13th.

Watch the Open Video Documentary.