Board Logo

Video Backgrounds - now in v5.60
Audiosoft - 4-24-2011 at 03:59 AM

get ready...soon - IE9 skins will be able to loop mp4 video in the background of the lists! every list area can have a different background video stretched to the list size. no more being limited to 256 color animated.gif tiles! :o watching it run videos on all the list backgrounds right now and ejukebox is still responsive and scrolling well.

now i am trying to decide on the options that need created...
should the Viz button on video bg skins have a 'show/hide' OR a 'pause' video background option?
i am not sure since a show/hide would require video bg skins to also look good without its video bgs.

image how awesome it will look with other ie9 enhancements layered on top. this screen only has 1 IE9 enhancement... video backgrounds. sorry you can't see the water flowing yet...there is still some work to do ;)


Pirk - 4-24-2011 at 11:50 AM

Oh yeah! that seems to be very promising. even if i'm not a video specialist. but sure, once more, Google will fill this gap.. :)


Audiosoft - 4-24-2011 at 04:54 PM

also you will be able to layer over the video with a gradient filter so videos can be recolored by the .dis alone!

and even a video behind Shelf3D...


Audiosoft - 4-26-2011 at 10:31 PM

with the following exe you can try them out! :D

first save attached water.mp4 to C:EJukeboximagesyourskin

then add the following to the top of colors.ini and save
[IEStandardsMode]
Version=9

[VideoBackgrounds]
Enable=True
NowPlaying=
PlayList=
ArtistList=water.mp4
SongList=
AlbumList=water.mp4
HomeView=water.mp4

Tools->Skin->Reload skin to see the video backgrounds. Vista/Win7 with IE9 required.

note: using the same filename.mp4 saves resources so does using ?=
it is supposed to accept all mp4's encoded in h.264 but some don't work ...still trying to find a reliable encoder for this with the right profile that is compatible for converting any video. if anyone finds the right encoder program and the right settings please share.

EJ now supports the following options in all .DIS and homeview.ini

#BGVideo { opacity: 0.9; }
#OverBGVideo {
display: block; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#3366FFFF,endColorstr=#80000099,GradientType=0);
}

there is also now support for a shelfbgvid.dis file containing the above


Pirk - 4-27-2011 at 09:19 AM

it works good: ejukebox is flooded! ;)

http://www.bmw-m.net/Humor/images/engine%20flooded.jpg


Audiosoft - 4-27-2011 at 06:02 PM

anyone find a free mp4 encoder h.264 profile that works?

here is a random tip for songlist.dis in IE9 skin

#bg {
position: fixed;
}

that stops the stretched background cover art from scrolling in the songlist


Pirk - 4-27-2011 at 08:55 PM

thanks for this tip Audiosoft!
i tried this free converter: http://www.dvdvideosoft.com/free-dvd-video-software.htm
i converted videos from youtube to mp4 files, but no success when loaded as background in ejukebox (?)


Audiosoft - 4-27-2011 at 11:25 PM

now all h.264 mp4 work!


Pirk - 4-28-2011 at 09:07 AM

ah this time it works good with the videos i converted. Great work Audiosoft! :o
i just noticed the shelf3D menu is gone?


Audiosoft - 4-28-2011 at 06:36 PM

yeah i noticed that also. though the record button on remote still works....
ran some tests and it might NOT be possible to get Shelf right click to work with a ie9 video bg...might have to add a left click button inside shelf3d. also video background can't work on shelf3d is fullscreen.


Audiosoft - 4-28-2011 at 07:32 PM

OK ran some more tests... with Flash player 10 installed we can have a video bg mp4 behind shelf3d even on XP! and right click will work! and the video while fullscreen shelf! so i am thinking Shelf= will get removed from IE9 colors.ini and shelf.mp4 will be born for all. the only concern is i think the video will show up over the shelf and you won't be able to see the shelf with flash 9 installed.


Pirk - 4-28-2011 at 07:43 PM

ok good news! i already have flash player 10 installed.


Audiosoft - 4-29-2011 at 10:37 AM

-now supports a video background for Shelf3D on XP, Vista and Win7!
-add shelfbg.mp4 to skin for video background. or use shelfbg.jpg for image background
-new shelf3d right click 'Video' option to toggle video background and read URL pasted in box for image or mp4 video. Good for testing video the URL accepts C:file.mp4 or http://site.com/file.mp4
-improved performance


Audiosoft - 4-30-2011 at 05:05 AM

-fixes jaggies
-video backgrounds look better in-focus ;)


Audiosoft - 5-1-2011 at 05:17 AM

VideoBG beta6
-performance tweaks

Tip: never use filter in #OverBGVideo or in body{} and all video backgrounds get more frames per second...
songlist.dis works good with #BGVideo{ opacity: 0.4; } #bg{
position: fixed;}


Pirk - 5-1-2011 at 11:00 AM

Thanks. i already noticed the first tip: more frames!


Audiosoft - 5-1-2011 at 10:48 PM

Instead of filters that make it slow you can now create the same and better effects for the background... by stretching a PNG image over the video!
the new [PNGBackgrounds] work in IE9 skins even when no video is specified for the area. they stretch to match the list area in the background overthe mp4 video and the .dis 's non stretched body{ background. no need to reload the skin when you change [PNGBackgrounds] just refresh the list. for [VideoBackgrounds] changes u need to reload the skin from the Tools menu.


Audiosoft - 5-3-2011 at 04:46 AM

-more speed tweaks
[VideoBackgrounds]
Shelf= works again :D overrides shelfbg.mp4


Audiosoft - 5-3-2011 at 09:34 PM

-fixed keyboard number pad and remote control issues with <- -> sometimes not working in the songlist and album list
-VideoBackgrounds are now paused when hidden (i.e. when the homeview is hidden its video pauses to save cpu)
-new option
[VideoBackgrounds]
OnlyPlayFocused=True
Saves CPU and keeps frame rate up by pausing the non focused videos...
this works well with keyboard/remote controller operation since it lets you know which area is focused.


the recent additions to colors.ini for IE9 skins are:

[IEStandardsMode]
Version=9

[VideoBackgrounds]
Enable=True
OnlyPlayFocused=False
Shelf=shelfbg.mp4 and ini also work on XP
NowPlaying=
PlayList=sunB.mp4
ArtistList=
SongList=
AlbumList=
HomeView=tron.mp4

[PNGBackgrounds]
Enable=True
NowPlaying=NowPlayingAboveBG.png and ini also work on XP
PlayList= also works on XP
ArtistList=gbuttonHI.png
SongList=
AlbumList=
HomeView=gbuttonHI.png


Pirk - 5-4-2011 at 11:36 AM

Audiosoft, i like much your new option "OnlyPlayFocused". if you could do something similar for the now playing VUmeter: when ejukebox is NOT playing music the vumeter would only "auto-anim" when focused. that would save almost 50% of the cpu time...
Thanks.


Audiosoft - 5-4-2011 at 08:27 PM

no problem that is an easy fix.


Pirk - 5-5-2011 at 11:11 AM

great! the planet will thank you. ;)


Audiosoft - 5-5-2011 at 11:22 PM

i hope you are right :D

OK we are out of beta! thanks for testing these Pirk... it has been a productive 2 weeks!
the VU screensaver fix is in v5.60...
http://www.audiosoft.net/forums/viewthread.php?tid=2893


Pirk - 5-6-2011 at 12:06 PM

yep i'm right: less Wasted Power on the PCs running ejukebox all over the world -> less electricity produced in the world! -> less CO2 in the atmosphere -> less climate disruptions: slowing the melting of glaciers, less devastating tornadoes... with its words the planet says "Thank You Audiosoft" for the VU screensaver fix!


Audiosoft - 5-7-2011 at 04:04 AM

glad to save the planet, electric bill and battery life!
next maybe i will plant a tree to eat all the CO2 released by EJ :D

check this out! found some nice background videos...
https://www.videoblocks.com/videos/looping-backgrounds/

i have been testing them in my skin by using the low-res demo .flv files on that site and converting them to mp4 using THIS
...attached is one that might be good for Shelf= in colors.ini

also there is a new youtube video that i made with Camtasia Studio...
if you skip to 3:30 you can see my IE9 skin which includes an animated 'global warmer' on the playlist :D http://youtu.be/X06fP1m_CAs


Pirk - 5-7-2011 at 09:14 AM

ah ohh! beautiful videos on this site! :o i'll try some of them in my skin. Thanks for the links Audiosoft!
PS: don't forget to plant a tree for Each ejukebox license sold: a new forest! :D


Pirk - 5-7-2011 at 02:48 PM

i tried various video backgrounds in EJ 5.60: it works good! i converted 97 videos from your site... :D unfortunately it seems some frames are missing when they are used behind the songlist or homeview, probably because of hardware limitations on my PC, but globally it works quite good.
Thanks for the large covers option in the songlist!


Pirk - 5-7-2011 at 03:34 PM

i tried reducing the songlist size: it works a lot better! :o


Pirk - 5-7-2011 at 04:12 PM

...


Pirk - 5-7-2011 at 04:36 PM

in this video the colors changing and the growth of vegetation, under your eyes, are magnificent! :cool:


Pirk - 5-7-2011 at 05:03 PM

Here is the "Hypnotic Flourishes", converted from your site: ;)


Audiosoft - 5-7-2011 at 05:56 PM

:o odd and even rows in the songlist...
tr:nth-child(2n) { }
tr:nth-child(2n+1) { }

only seems to work on each row background not each element like title, rating, genre :(


Pirk - 5-7-2011 at 06:10 PM

where you add that?


Audiosoft - 5-7-2011 at 06:11 PM

in songlist.dis just add
tr:nth-child(2n)
{ background-image:url(songlisttitle.png); }
and it will have background on every other row
not very useful because the background shows in the empty artist space

that hypno background is OK. the ones on that site are a kind of short but they do loop nice. maybe i will i will sign up to get the hd versions.
this is my favorite video so far besides my lava lamp loop which is 28MB. this one is only good for Playlist= in colors.ini

[VideoBackgrounds]
Enable=True
PlayList=solarflare.mp4


Audiosoft - 5-7-2011 at 06:21 PM

and i put this PNG over it in colors.ini

[PNGBackgrounds]
Enable=True
PlayList=PNGBackground.png


Pirk - 5-7-2011 at 06:30 PM

OK for tr:nth-child(2n).. too bad it does not work in title
beautiful your video!


Pirk - 5-7-2011 at 10:52 PM

Here is another CSS feature i added in my songlist:


Audiosoft - 5-8-2011 at 10:02 PM

working on an IE9 skin for EJukebox with subtle animations...
...
stained glass color effect in artistlist.dis works with hsla or rgba
[HiArtistBackground]
Color=hsla(165,100%,40%,0.3)
Color2=hsla(165,100%,40%,0.3)
TextColor=rgba(255,255,255,0.5)
TextColor2=rgba(255,255,255,0.5)
TextColorHi=#FFFFFF
TextColor2Hi=#FFFFFF

fun with alpha colors, radius and box shadow

color: rgba(255,255,255,0.5);
background:transparent;
background-color: rgba(111,111,61,0.05);
border-top: 3px inset rgba(222,111,61,0.1);
border-left: 3px inset rgba(111,111,61,0.1);
border-right: 3px inset rgba(111,111,61,0.1);
border-bottom: 3px inset rgba(222,111,61,0.1);
border-radius: 100% 10% 100% 100%;
box-shadow: inset 3px 3px 30px rgba(111,111,61,0.5);


Pirk - 5-9-2011 at 12:15 PM

indeed subtle or not, video animation effects can be really surprising! :D


Audiosoft - 5-9-2011 at 06:12 PM

:o:D
maybe put a... background-color: hsla(240,0%,100%,0.5);
in .Artistrow2 (or is it .Artistrow?) so the black text is easier to read


Pirk - 5-9-2011 at 06:44 PM

it was just a snapshot after i added the video background behind my previous skin..
maybe better like that: thanks.


Audiosoft - 5-9-2011 at 07:01 PM

wow that looks so awesome!:o


Pirk - 5-9-2011 at 07:11 PM

yeah i've also been surprised more than expected by this result!! :cool:
but that will be "the skin of 2020"... :D if we don't have a Skin Builder before! :(


Audiosoft - 5-9-2011 at 07:28 PM

2020? :( that's too late... IE10 will be out by then with text-shadow and multi-step alpha gradients ;)

well there is already Create skin.zip ....and this forum with big attachment support. you still need EJ to delete all unused images?

maybe what we need is a good IE9 base skin and then a window to let the user pick border, background and text colors, fonts and background mp4 and not make them worry about images or sizing or where to use zoom. full skins will still work the same but maybe we could have skins that are easy to customize. the idea would be to create variables in .dis and colors.ini that would map to user selected values. so instead of color: #FF000 the .dis would have color: ^ReusableName^; there would be a master and user style.ini that would map all the ReusableNames=value and have a window in EJ to change the values instead of having to edit the style.ini. How does that sound? the names would have to also somehow name the Type. longcolor, hexcolor, alphahex (still only way to get alpha gradients until IE10), hsla color, filename, fontname. or would this all make it all more confusing? i am afraid any skin builder would have to limit the possibilities that already exist with .dis, colors.ini and reusable files. is it not easier to copy and paste code around in colors.ini and .dis files than to have a drop down box to set each value?


for instance...have you tried?
.albumwimagehi
{
box-shadow: inset 3px 3px 30px rgba(111,111,61,0.5);
zoom: 170%;
position:relative;
top:0px;
left:-170px;
}


Pirk - 5-10-2011 at 12:12 PM

RE: you still need EJ to delete all unused images?
yeah more than ever... like a skin publisher! i would always need a tool to do this boring work for me because day after day i try Too Many images and their variants edited in photoshop (if only it was possible to save the file edition historic?) this tool could lead to a clean public skin regularly, each time starting from the functional but totally messy skin version. for me messy = never posted...
i was hoping you'll improve the disripper.exe so that it really works for the entire skin images. reading ALL and only the really used images, maybe from the HTML "final page"?
more the tool will be powerful, more often i will post variants of my skin. avoiding the so boring cleaning stage...
a moment i thought you were leaving on this idea? i think that was the good way!
and if the tool could also clean the .dis files, removing repeated instances of the same instruction.. :D

RE: is it not easier to copy and paste code around in colors.ini and .dis files than to have a drop down box to set each value?
yes, probably!

Thanks.


Audiosoft - 5-10-2011 at 06:28 PM

hmm what happened to that list of images? i remember posting it.
it had all images for EJ that are not set in .dis or colors.ini

all the VU meter and MP4 newness and i forgot about .dis ripper exe
http://www.audiosoft.net/forums/viewthread.php?tid=2839#pid81954

oh yeah it was supposed to be open source. oh well i'll see what i can do.


Pirk - 5-10-2011 at 06:30 PM

open source or not, if it fulfills its office.. thanks if you can do something!