Floating flash movie with transparent background

This forum is for general questions about extensions for Joomla! version 1.5.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Sun Oct 31, 2010 3:46 am

eversys wrote:Nice example Ken :laugh:

I really like the idea I would like to try this out. Should I open a new post for this or are you able to help me here? Is there a Joomla module or plugin which can do this? Any ideas?
I do not see much use for this so I am not interested in spending much time on it.
The iAds demo is to show potential customers how the service would look on their own website.
Unless one is going into the transparent presenter video business, I do not see much use for it.

My interest in the transparent player is to add this feature into AVR2 so anyone can do it on their own website.
That is now working basically.
But with a couple wish-list items missing:
- remove the div on complete
- play once

The AVR 1.2.6 play-once JavaScript no longer works with the newer JW Player.
This is because the player JavaScript API has changed, and I have not been able to update the JavaScript properly.

These wish-list items are prioritized behind other more pressing issues at this point.
.
██ LibreTraining

 
User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Sun Oct 31, 2010 5:02 pm

No problems Ken - your help up to now has been tremendous and I can only thank you for your excellent and continuous support in these matters.

If I can manage to get a player to remove on complete or play once - I will post.

Once again - THANK YOU!

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Thu Nov 04, 2010 11:08 pm

I've just come across Flowplayer - quite a nice player to customize. Am working on getting this to 'unload' / remove the div on complete.

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Fri Nov 05, 2010 12:41 am

.
Hi Oliver,

I evaluated Flowplayer quite awhile ago for inclusion in AVR2.
Mostly because I wanted users to have an alternative to the commercial JW Player.
But, the commercialization and restrictions of Flowplayer are even worse than JW Player in some ways.
So I dismissed the idea of adding it to AVR2.

Instead I have spent much more time on adding free, open source, GPL players to AVR2.
There are now alternatives to those commercial players.
The Strobe Media Playback player project sponsored by Adobe is making rapid progress.
The Open Video Player for Flash project sponsored by Akamai is making significant progress.
Both of these are based on the Open Source Media Framework.

Free, open source, GPL players - far more appropriate for a free, open source, GPL extension like AVR2.

Note that the Strobe Media Playback is the player code which I think may be possible use for the free GPL transparent player in the future.

Back to the "remove the player on complete" issue - if you get it working in AVR I would love to see it.
:)

Regards,

Ken

.
██ LibreTraining

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Sat Nov 06, 2010 9:26 pm

Hi Ken,

I've been busy 'playing' and got the Flowplayer to remove on complete ;) . I also added an exit button so the surfer can click the movie away if desired. Check out my Test Movie 5.

I created a new AVR player & Tag called "Flowplayer_Classic". The player code:

Code: Select all

<script src="plugins/content/flowplayer/flowplayer-3.2.4.min.js"></script>
<script>
$f("player", {src: "plugins/content/flowplayer/flowplayer-3.2.5-classic.swf", wmode: "transparent"}, {
    clip: {
        url: 'images/stories/videos/test-movie.flv',
        autoPlay: true,
        autoBuffering: true
    },
	plugins: {  

	controls: {

                url: 'plugins/content/flowplayer/flowplayer.controls-3.2.3.swf',
		bottom: 0,
		opacity: 0.95,
                width: 195,
                play: true,
		stop: true,
                scrubber: false, 
		time: true,
		mute: true,
		volume: true,
               	fullscreen: false, 
		timeColor: '#ffffff', 
                timeSeparator: ' / ',
		durationColor: '#ffffff', 	
		progressColor: '#ffffff', 	
		progressGradient: 'medium', 	
		bufferColor: '#F2EDDD', 	
		bufferGradient: 'none', 	
		sliderColor: '#ffffff', 	
		sliderGradient: 'none', 	
		buttonColor: '#D7CCC0',	
		buttonOverColor: '#D7CCC0',
	            tooltips: {
        	        buttons: true,
                        stop: 'Exit'
          	    }
		}
    },
    	onStop: function(){
          	this.getPlugin("play").hide(),
                        $f("player").hide(); 
    },

  	onFinish: function() {
          	this.getPlugin("play").hide(),
                        $f("player").hide(); 
   }
});
</script>
My article div code:

Code: Select all

<div style="position: absolute; z-index: 100; right: 0px; bottom: 0px; height: 270px; width: 480px;">{Flowplayer_Classic autostart="true" divid="player" width="480" height="270"}test-movie{/Flowplayer_Classic}</div>
Perhaps you can use some of this code to help with the problems you were experiencing with the jwplayer? :( I also have a slight problem with my code... at the moment, I need to create a new AVR player for each movie I wish to show since the AVR code includes the .flv:

Code: Select all

    clip: {
        url: 'images/stories/videos/test-movie.flv',
        autoPlay: true,
        autoBuffering: true
    }
Is there anyway I can somehow get the reference to the .flv into my article / div code, so that I just reference the AVR Player but the movie is defined in the article? I am still trying to get my head around this whole coding thing!

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Sun Nov 07, 2010 8:54 am

eversys wrote: . . .
My article div code:

Code: Select all

<div style="position: absolute; z-index: 100; right: 0px; bottom: 0px; height: 270px; width: 480px;">{Flowplayer_Classic autostart="true" divid="player" width="480" height="270"}test-movie{/Flowplayer_Classic}</div>
Perhaps you can use some of this code to help with the problems you were experiencing with the jwplayer? :( I also have a slight problem with my code... at the moment, I need to create a new AVR player for each movie I wish to show since the AVR code includes the .flv:

Code: Select all

    clip: {
        url: 'images/stories/videos/test-movie.flv',
        autoPlay: true,
        autoBuffering: true
    }
Is there anyway I can somehow get the reference to the .flv into my article / div code, so that I just reference the AVR Player but the movie is defined in the article? I am still trying to get my head around this whole coding thing!
The Media URL is replaced in the player code with the @MURL@ variable.
So this would replace the code above:

Code: Select all

    clip: {
        url: @MURL@,
        autoPlay: true,
        autoBuffering: true
    }
The file name is taken from the tag in the article, and the .flv is added by the player tweaks in the tag configuration.
Example from the existing flv tag . . .
Player template tweaks: @MURL@ < @VLOC@@CODE@.flv
@CODE@ is the file name from the tag in the article.
@VLOC@ is the video folder location.
So that tweak is putting the media file path, and file name with the .flv file extension into @MURL@.
Then @MURL@ is replaced when the player code is inserted into the page.

Copy the existing {flv} tag like we did before for the transparent player.
Use {flv-fp} for example, FLV Local - Flowplayer
Set the player for that tag to your new Flowplayer player.

{flv-fp}test-movie{/flv-fp} should then work.

-----
This Flowplayer remove-on-complete code will not work for JW Player.
The function is in their .js file and uses that player's API.
.
██ LibreTraining

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Sun Nov 07, 2010 11:52 am

Thanks for your quick response Ken! Fantastic - I just needed to add @MURL@ between 2 single quotes:

Code: Select all

    clip: {
        url: '@MURL@',
        autoPlay: true,
        autoBuffering: true
    }
...and works just great! You're a tremendous help - THANK YOU! Shame that this code won't work with the JW Player. Was worth a go.

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Tue Nov 09, 2010 9:52 am

Hi Ken,

Do you know if it is also possible to add player tweaks to the tag configuration, so that the positioning and sizing of the player's control bar can be added to the article html as opposed to the Player code? Here an example of the Player code I mean:

Code: Select all

 controls: {
   top: 0,
   bottom: 0,
   left: 120,
   opacity: 0.95,
   width: 195,
   play: true,
   stop: true,
   scrubber: false,
   time: true,
   mute: true,
   volume: true,
   fullscreen: false,
...
If I could then change the values within the article code itself, would be really nice. Any ideas?

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Tue Nov 09, 2010 11:09 am

.
Hi Oliver,

Settings that will always be available are fairly simple.
Replace the variable with the capitalized text within "@" characters.
width: 195,
becomes
width: '@WIDTH@',
then you put width="195" in the tag.

When there are defaults that you only want to change sometimes,
use the @IFS(PARAM)@ ... @/IFS@ replacement.
The ... inside that IFS is usually the param: '@PARAM@', like the width example above

An example for a volume parameter:
@IFS(VOLUME)@volume:'@VOLUME@',@/IFS@
This says If a volume parameter exists in the tag
then the text volume: '@VOLUME@', is inserted in the code block.
Let's assume you have volume="50" in the tag.
So the '@VOLUME@' is then replaced with '50'
and you end up with
volume: '50',
in the player code block.

So for each of the settings you have in the code block above, create these IFS's.
Such as:
@IFS(TOP)@top: '@TOP@',@/IFS@
@IFS(BOTTOM)@bottom: '@BOTTOM@',@/IFS@
etc. ...

In this case the text is inserted into the player code block only if a setting exists in the tag.
If the player default for top is "0", there is no need to send this to the player in the player code every time.
And no need to put it in the AVR embed tag every time.


I have added 6-7 different players to AVR and all have different parameters like this.
It takes awhile.
Watch your commas and quotes. (my most common error)
:)

.
██ LibreTraining

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Tue Nov 09, 2010 4:40 pm

Thanks Ken - great stuff. Got it working with your "width" example. However, could not get it to work with autoPlay. The player code looks like:

Code: Select all

autoPlay: '@AUTOPLAY@',
and the code in my article div:

Code: Select all

{Flowplayer_Classic divid="player" width="195" autoPlay="false"}
Any ideas? I also created no "Player template tweaks" under Player Manage Tags - right?

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Wed Nov 10, 2010 6:00 am

.
AVR expects lowercase parameters in the tag.
(the regex is looking for all lowercase text)

So in the tag
autoPlay="false"
should be
autoplay="false"

AVR grabs the tag setting from this lowercase parameter and sticks it in the uppercase equivalent.
So the false from autoplay="false"
gets put into AUTOPLAY
Then that AUTOPLAY is used to replace the @AUTOPLAY@

The player code is OK.
The camelcase can remain there where AVR is not doing a replacement.

That is probably the issue.

.
██ LibreTraining

User avatar
ehart
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Jun 17, 2009 6:10 pm

Re: Floating flash movie with transparent background

Post by ehart » Mon Nov 15, 2010 12:29 am

kenmcd wrote:.

I now have it working on a plain HTML test page.
At the end of the video, SWFObject removes the entire player DIV.

.
I've run across this thread and am having trouble with removing the player after a video is complete. Once the video is complete, the player is sitting on top of the link to the main site. I've been trying to follow this thread, but there's a lot going on in addition to my problem.

My intention is to have the video on the front page of my site which will consist of a Jomsocial component wrapped in my site, but first I'm trying to get it working on a plain HTML page.

I'm definitely not a programmer, but have been able to figure out how to get here. I embedded the video using dreamweaver, which created the swfobject.js (that's not something I coded... dreamweaver just embedded it when I added the swf player).

I've been researching for a whole day how to get the player to unload or disappear, and this thread seems to be the closest to solving the problem as anything I've found.

site with the plain HTML is www.homeskoolie.com. The link that can't be selected since the video is on top of it is www.homeskoolie.com/community.

Thanks for any help you can give.

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Mon Nov 15, 2010 9:55 am

.
There is a working example on the previous page.
But that example uses the JW Player and its own JavaScript API to listen for the completed event.
You would need to substitute your player in that example HTML page.
And use your player's JavaScript API to listen for the completed event.


Crop the video and it will not cover so much of the page.
It really does not need to be 720px wide.

.
██ LibreTraining

User avatar
ehart
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Jun 17, 2009 6:10 pm

Re: Floating flash movie with transparent background

Post by ehart » Mon Nov 15, 2010 4:23 pm

Thanks a ton for responding. Yes, I thought about re-sizing the video last night. That's definitely something I need to do.

Here's my ignorant question about the player comment. I embedded the video using Dreamweaver, which just created the player for me (DW apparently has several player options since there's a drop down that lets me pick the controls). So what exactly is JavaScript API and where would I find that for my player? is that part of the .js code (DW created a swfobject.js file) or is it a set of parameters that I need to find somewhere else?

I have the following files
the index.html file.
Clear_Skin_1.swf file... I believe that's the player.
A Scripts folder containing swfobject.js & expressInstall.swf. I can't make much out of the swfobject.js file since I don't know much about programming.

I may try the JW Player route also, but I'd love to actually learn how I can do it with the player DW inserted.

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Mon Nov 15, 2010 5:29 pm

.
Actually FLVPlayer_Progressive.swf is your player.
And Clear_Skin_1.swf is a skin for that player, which you selected when you inserted the player.

A player JavaScript API is a way to communicate with the player via JavaScript.
Removing the player DIV from the page at the end of the video requires the player to communicate that it is done playing the video, and then the JavaScript listener waiting for that communication does something, which in this case is remove the player DIV from the page.
The player JavaScript API is created by the player developer when creating the player.

I took a quick look at the Dreamweaver docs and did not see any JavaScript API for that player you used.
So there is no way for it to say I'm done, and then do something.

.
██ LibreTraining

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Mon Nov 15, 2010 5:34 pm

Hi Ken, I am still battling with a good flash player - I would like a customized skin along with exit button etc.! We thought about creating one from scratch - but our experience in programming and venturing into the whole Adobe Flash world is a little daunting. Is it possible to edit an exiting player for ones own needs? Do you know of any tools? Or is this a no go?

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Mon Nov 15, 2010 6:03 pm

.
Hey Oliver,

What happened to your Flowplayer activities?
It looked pretty good on your demo page.
I did not know it had a way to toggle the scrub bar Off like that.
It is open source and GPL; you could modify that.
So, what happened?

My long-term focus is on the Strobe Media Playback player from Adobe.
Free, open source, GPL, and based on the Open Source Media Framework.
They are releasing v1.5 soon.
And they seem to be very open to feature requests.
So after v1.5 is released I am going to ask about some other features.
Transparency, toggling individual elements, etc., etc.
If I am going to invest many hours in learning how to modify a particular player,
a free, open source, GPL player seems to make the most sense.

Ken

.
██ LibreTraining

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Mon Nov 15, 2010 6:14 pm

Hi Ken. I love the Flowplayer - my problem is I can't get the unload() function to work - this should get the player to remove itself at the end of the movie - or when a stop button is clicked. I have posted on their forum, but up until now no luck.

User avatar
ehart
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Jun 17, 2009 6:10 pm

Re: Floating flash movie with transparent background

Post by ehart » Tue Nov 16, 2010 12:58 am

Looks like I'll need to go either the JW Video route or possibly create a flash player in Flash.

Problem with JW is that I haven't been able to find the JW Player v4.3 anywhere on the site. I saw a comment at the beginning of the thread that said it can be found on the site, but I haven't managed to locate it.

Do you know of any resources you can point me to in order to show how to create a simple player in Flash and accomplishing the same thing? Since I've got access to CS4, I'd like to figure that out.

I assume the working example is the large section of code posted on the 10/26 8:37pm post?

Thanks again. I feel like I'm getting a little closer to understanding this...

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

JW Player for Flash 4.3.132 attached

Post by kenmcd » Tue Nov 16, 2010 2:32 am

.
Here ya go:
jwplayer-4.3.132.swf.zip
.
You do not have the required permissions to view the files attached to this post.
██ LibreTraining

User avatar
eversys
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Wed Jul 28, 2010 3:55 pm

Re: Floating flash movie with transparent background

Post by eversys » Sun Nov 28, 2010 1:36 pm

Hi there Ken! I've just run into a slight problem. I have just enabled all SEO Settings in my Global Configration (Search Engine Friendly URLs, Use Apache mod_rewrite, Add suffix to URLs) and my movies (except the one bound to my start/home page) no longer play. The pages appear but the movies don't play (using Flowplayer).

Any ideas what the problem could be?

=== Update ===

I was being silly - file references to the .js now need to be absolute i.e. I changed "plugins/content/flowplayer/flowplayer-3.2.4.min.js" to "www.eversys.de/plugins/content/flowplay ... 2.4.min.js", along with other references, and all was fine ;)

User avatar
ehart
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Jun 17, 2009 6:10 pm

Re: Floating flash movie with transparent background

Post by ehart » Tue Nov 30, 2010 6:24 pm

I've been offline for a couple weeks, but wanted to say THANKS for the JWPlayer version. I'll be trying it out per the previous page.

tkbrannon
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Feb 16, 2011 5:58 am

Re: Floating flash movie with transparent background

Post by tkbrannon » Tue Mar 01, 2011 10:43 am

Hello how do I get this tutorial to work with the small controls in joomla?

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Tue Mar 01, 2011 8:16 pm

tkbrannon wrote:Hello how do I get this tutorial to work with the small controls in joomla?
Huh ???

What are the "small controls in joomla?"


.
██ LibreTraining

tkbrannon
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Wed Feb 16, 2011 5:58 am

Re: Floating flash movie with transparent background

Post by tkbrannon » Tue Mar 01, 2011 11:55 pm

kenmcd wrote:.
75 seconds is probably too long for the intro video.
You should concentrate on the script first before filming again.
Post it if you would like some input.

Got a smaller player with transparent controls working.
Works with code in an article, or in the AVR module.

This example uses the AVR module.

Image


Click on the video and it goes to a designated link - your website in this example.
I also have the bottom float working from code in an article.
Also have a video floating over an image in an article.

It has become clear that the best way to do this with all the required features would be a completely new module. But that is another project.


Regarding the Moyea player, don't know anything about it.
May be possible to use it if it has the right features.
You would have to tell me.
;)

.

I am trying to duplicate the player on this page with the small white control menu over the image.

KPPROD
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Wed Mar 16, 2011 2:26 am

Re: Floating flash movie with transparent background

Post by KPPROD » Wed Mar 16, 2011 2:40 am

Gentlemen:

I'm newbie to this forum, however I am a video producer who is developing a Web Spokesperson production division of my company. While most of my clients have HTML or Flashed based sites, my own site for this business is built in joomla 1.5 and I am needing to place demonstration videos on including an introduction on my frontpage. HELP!!! I'm not sure I understand how to do this, so any assistance would be greatly appreciated. I would also perhaps be interested in hiring assistance with this as well. Thanks

Ken

joelouw
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Tue Feb 15, 2011 8:57 pm

Re: Floating flash movie with transparent background

Post by joelouw » Mon Mar 21, 2011 2:08 pm

Hi kenmcd

I see you are responding to a lot of the questions regarding wmode and transparent.
I have now tried every thing really everything - My problem is a bit different, I now use Allvideos Reloader, after I had no success with AllVideo by Joomla - All I need to do is to get my drop down menu out behind of my video. It is hidden/view behind my quicktime movie player. It is a .mov file and nothing I do, that you mentioned over a few posts seems to work for me.
WHAT CAN I DO PLEASE PLEASE

joelouw
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Tue Feb 15, 2011 8:57 pm

Re: Floating flash movie with transparent background

Post by joelouw » Mon Mar 21, 2011 2:16 pm

kenmcd here the link to site with problem: http://www.thombesafari.com/index.php?o ... Itemid=193
Please not it works on Safari on a mac only
Also the link I send is still on AllVideo from joomla, but I now have instaled Allvideos Reloader and edit the site localy, until my problems are fixed then I will upload again.

User avatar
kenmcd
Joomla! Champion
Joomla! Champion
Posts: 5672
Joined: Thu Aug 18, 2005 2:09 am
Location: California
Contact:

Re: Floating flash movie with transparent background

Post by kenmcd » Mon Mar 21, 2011 3:11 pm

.
This thread is about a Floating flash movie with transparent background.

This thread is not about dealing with your menu being behind a MOV file played with QuickTime.

Please start your own thread.
.
██ LibreTraining

joelouw
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Tue Feb 15, 2011 8:57 pm

Re: Floating flash movie with transparent background

Post by joelouw » Mon Mar 21, 2011 3:22 pm

Sorry for this but I have made a few posts already, no one seems to get back to me on new posts. The active ones guys actually get back to you, like you did now. Cool appreciate it. It's just that you looked like the only one that knows a lot about this wmode transparent thing.

 

Locked

Return to “Extensions for Joomla! 1.5”