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

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!

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!

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. :)

Warning! I don’t support this version any more!

Go here to get my player and support and all the rest.

In the last few weeks I spent some days learning ActionScript3, as you can see here. My latest work is a simple VideoPlayer built to easily embed and adjust flv files in XHMTL documents. It can bee seen in action at my friend Ben Roth’s homepage www.freisprung.com.

My main aim was to make the videoPlayer easy to adjust without opening Flash. Therefor, I made it possible to change the size, the source and all colors of the controller in the javascript-snippet used to embed it into the »container.html« file.
For the video source you can use *.flv and *mov (h.264 codec) files.

The code for the video source
player.addVariable("videoSource", "http://www.yourdomain.com/yourmovie.flv");

Code for setting autoplay (default: true) and allowSmoothing (default: true) to true or false
player.addVariable("autoplay", "true");
player.addVariable("allowSmoothing", "true");


The code for the colors
player.addVariable("normColor", "000000");
player.addVariable("loaderColor", "cccccc");
player.addVariable("specialColor", "ffffff");
player.addVariable("backGroundColor", "ff3399");
player.addVariable("fullSrceenSpecialColor", "ffffff");

You just choose your colors for example in Photoshop and copy/paste the HEX-Codes, so for example red would be »ff0000«. The codes in the example above would make the controls look like this:

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« and post a link to the project in the comments of this entry, so that I can see, what your favourite color scheme is ;)

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

DOWNLOAD SOURCE

P.s.: Thanks to André Michelle for the simpleMouseEvent class!

---

Updates since the first Upload

• 30.06.08: I fixed two bugs: If searching the video close to the end it used to hide the navigation bar and show the restart button, fixed. Moreover the sound was not muting when searching, I think this was a bug in the new flash player release, fixed now as well.
• 30.06.08: All code commenting is written in english now
• 28.03.08: Today I added a custom ContextMenu with functions like toggle FullScreen, toggle Sound, toggle Smoothing and a nice link to this post ;)
• 27.03.08: New function added to set allowSmoothing to true / false
• 14.01.08: Since today there is a VolumeControl included. I’m not sure if I should make it possible to activate/deactivate the VolumeControl in the javascript snippet, if you think so, please drop me a line!
• 09.12.07: New function added to set autoplay to true / false

---

This player is licensed under a Creative Commons License.

So, ich kann wohl langsam behaupten, auch in Javscript sinnlos-smoothe Animationen hinzubekommen.

Zu sehen ist das Ergebnis erster Spielereien auf meiner Portfolio-Seite, die ja auch genau solche Leistungen meinerseits anpreist.