Nonverblog

Since nobody was willing to write a plugin to use my player with wordpress I decided to use my incredible php skills and hack the well known wordpress-plugin wordTube. The video in this post was uploaded, edited and embedded using the brand new plugin “wp_NonverBlasterHover”.

Important Note:

If you want to use this plugin, you have to deactivate the plugin wordTube on your blog. My big hope is that fwolf will write something that is better than this. For me it works for now, though.

Features:

• You can embed Video (.flv and h.264.mov) or Sound (.mp3) files
• You can adjust width, height, loop, crop, showTimecode, controlsEnabled, defaultVolume, controlColors etc in a nice looking UI
• You can directly insert uploaded media in a post using the “Add Media” button while editing.

Download Plugin

Inspired by Mr Doob and Vasulka (Maybe rather a straight rip-off than inspiration, but somehow it seems to be the english word used in cases like this). You’ll need a webcam for this.

Download Source

The NonverBlaster:hover is a mod of my Flash-based Video-Player »NonverBlaster«. It was developed for the IT-news portal golem.de. Good on them, they allowed me to provide a stripped down version of it for download on my blog (which is where you are right now). You can find the download link at the end of this post. If you want to get an idea about what’s possible with the player, you should check out the NonverBlaster:hover Demo Pages.

Example: Video

»Ascension« by Ben Roth

Example: Audio

»Piaffe« by Kotelett

New Features & Updates (read it!)

• It is possible now to show a teaser image (preview image), if the flashVar “autoPlay” is set to “false”
• All controls are placed over the video now. They hide automatically, if the cursor leaves the stage or doesn’t move for a few seconds.
• There is a new option to show the timeCode of the video playback (can be switched on and off using flashVars)
• In FullScreen Mode, it is possible to switch the video scaling on and off
• I removed the functionality of changing the colors of the controls since nobody really used it with the old NonverBlaster (If you think I should re-include it, post an angry comment ;)) You can set one colour for all the controls now, by changing the flashVar “controlColour”
• There is a new FlashVar for setting the loop mode to true or false
• New FlashVar: scaleIfFullScreen
• New FlashVar: showScalingButton
• New FlashVar: defaultVolume
• 18.04.2009: New FlashVar: controlBackColor
• 20.04.2009: Commincation with Javascript added (play, pause, toggleSound)
• 21.04.2009: Now the player is able to play back .mp3 files! NOTE: Due to this change the former variable “videoURL” now changed to “mediaURL”!!
• 14.05.2009: I added the possibility to include an “indent-image”.
• 14.05.2009: The Player reports now to javascript if the playback is complete.
• 05.09.2009: In the folder “sources” you can find now an example for including the player within a flash movie.
• 20.09.2009: New Flashvar added: set “crop” to “true” or “false” to adjust how the video should fit to the bounds of the player.
• 07.12.2009: New Feature: You can now switch between HD and SD at runtime
• 07.12.2009: New Feature: Javascript Playlist added
• 08.12.2009: New FlashVar: controlsEnabled = “false” (completely hides all controls)
• 29.12.2009: You can now display subtitles together with your video or audio. You can specify the file (.srt or .xml), the position (top or bottom), color and font-size of the subtitles.
• 30.12.2009: Since now there is an online demo of the player available. Check it out: NonverBlaster:hover Demo Pages
• 30.12.2009: New FlashVar “onClick”: Controls what should happen if the playing video was clicked. It can be playing / pause the video (”togglePlay”, default), navigating to a certain url (”http://somedomain.com/”) or nothing (”" or “disabled”)

Usage

Just like in the previous version of NonverBlaster, it is possible to set some flashVars to embed a video:

The URL of the video you want to play (can be .mov, .flv or .mp3):

flashvars.mediaURL = "yourmovie.flv";

The URL of the teaser image (Should have the same dimensions as the video):

flashvars.teaserURL = "yourimage.jpg";

All other adjustable variables:

flashvars.allowSmoothing = "true";
flashvars.autoPlay = "false";
flashvars.buffer = "6";
flashvars.showTimecode = "true";
flashvars.loop = "false";
flashvars.controlColor = "0x99ff33";
flashvars.controlBackColor = "0x000000";
flashvars.scaleIfFullScreen = "true";
flashvars.showScalingButton = "true";
flashvars.defaultVolume = "100";
flashvars.indentImageURL = "indentImage.png";
flashvars.crop = "false";
// controls what should happen if the running video was clicked. "togglePlay" (play/pause video), "http://somedomain.com" (navigates to this url) or "disabled" (nothing happens)
flashvars.onClick = "togglePlay";
// subtitles: can be .srt or .xml
flashvars.subtitlesURL = "subtitlesFile.srt";
flashvars.subtitlesPosition = "bottom";
flashvars.subtitlesSize = "15";
flashvars.subtitlesColor = "0xffffff";
// hd switching
flashvars.hdURL = "yourmovie-hd.mov";
flashvars.defaultHD = "true";

More Information can be found in the .zip-file…

CMS Plugins

For the following CMS systems there are plugins available for NonverBlaster:hover :

• Typo3 (by Thomas Hirt)
• Wordpress (by me & Alex Rabe)
• TYPOlight (by Sven Jansen)

This player is open source, you can use it in every kind of project you like. The only thing I’d like you to do for me is to post a link from your project to this post saying something like »Videoplayer powered by NonverBlaster:hover« and post a link to the project in the comments of this entry, so that I can see, how this piece of code is used :) Thanks a lot to André Michelle for the simpleMouseEvent class and to Grant Skinner for gtween, the best free tweening class I know!

If you have any questions or suggestions, just ask me…

Download the Player

Finally I got some donations! Thanks a lot for the support!

One more byprodukt of my blinkbilders. Click anywhere on the stage to let a drop fall onto the surface:

Watch in browser »
Download Source

Download Source

In the issue 14 of the online design magazine »newwebpick« Basics09 got 5 pages to have some fun (starting from page 39). This is the first page, I’m the guy that looks like a turkish technician.

Thanks a lot to you guys!

Yesterday when I did some blinkbilders at Im Frühtau, I encountered an average problem with connecting my MacBook to the beamer: It didn’t work. Obviously the signal was too low for the software to believe that there was a beamer connected (25 meters is a long distance for a VGA-Cable). After 2 hours I found out how to solve it: I used a shorter cable for the connection, left the DVI-adapter plugged in, disconnected the shorter cable and re-connected the longer cable. Tadaa! It worked fine.

Caution: If you let your Macbook go to sleep or disconnect the DVI-adapter, it won’t work again and you have to repeat the whole short-cable-long-cable-procedure. Maybe this helps someone…

Ich hatte die Ehre, den neuen Titelsong gemeinsam mit dem Berliner Kotelett Chor einsingen zu dürfen! Zu geniessen gibts diesen Ohrenschmaus auf www.myspace.com/kotelett

Today, when I came back to Berlin, I found the corean w.e.b magazine in my mail, containing an article about me and my project studiokowski.de . I can’t read anything they have written about it, but I hope it’s positive ;)

Here a link to the homepage of w.e.b . Thanks a lot guys!

Wow, this site is one year old and still worth a FWA Site of the day award! I’m very happy, thanks a lot to the Team FWA!

That’s what they say about it:

It’s a pleasure, great site.
FWA is not all about big budget sites and video… we love simple creativity like this. :)