Floating flash movie with transparent background

[kenmcd]

Nice example Ken

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

[eversys]

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!

[eversys]

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

[kenmcd]

.
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

.

[eversys]

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!

[kenmcd]

. . .
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@@[email protected]
@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.
.

[eversys]

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.

[eversys]

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?

[kenmcd]

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


.

[eversys]

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?

[kenmcd]

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

.

[ehart]

.

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.

[kenmcd]

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

.

[ehart]

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.

[kenmcd]

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

.

[eversys]

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?

[kenmcd]

.
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

.

[eversys]

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.

[ehart]

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

[kenmcd]

.
Here ya go:

jwplayer-4.3.132.swf.zip

.

[eversys]

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

[ehart]

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]

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

[kenmcd]

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

Huh

What are the "small controls in joomla?"


.

[tkbrannon]

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




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]

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]

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]

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.

[kenmcd]

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

[joelouw]

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.