You will recieve your password to this address. Address is not made public.

Your preferred username that is used when logging in.

Flowplayer does not load until the container is clicked Created Jul 11, 2009

This thread is solved

Views: 1277     Replies: 10     Last reply Sep 7, 2009  
You must login first before you can use this feature

Moris

Posts: 5

Registered:
Apr 21, 2009

Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Hi, I'm trying to upgrade a working site to get it to work with the latest version of Flowplayer and I get a strange error.

The flowplayer() function does not seem to load the player into the appropriate container until the container itself gets clicked on.

This is really NOT what I want and I have been trying to solve the issue for long hours now. I have also used google, rtfm, searched around this forum a bit... to no avail.

So, here come some code snippets:


flowplayer ("player", 
            "http://tvproart.pl/swf/flowplayer.commercial-3.1.1.swf",
             {clip:     
                { width:485, 
                  height:400,  
                  autoPlay:true, 
                  autoBuffering:true, 
                  scaling:'fit'
                },
             playlist: [
              'http://tvproart.pl/tvonline/splash/1247212657.07.09.jpg',
               'http://tvproart.pl/tvonline/materialy/1247212629.avi.flv'],
             plugins:{ controls:  { 
                             play:true,
                             volume:true,
                             time:true,
                             stop:true,
                             playlist: false,
                             fullscreen:true,
                             scrubber:true }
                      },
             logo:{ url:'http://tvproart.pl/logo/logo1244135624.png',
                    fullscreenOnly:true },
              key:'$aaaaaaaaaaaargh'
           }
         );



 <a id="player" style="width: 485px; height: 400px; display: block; text-decoration: none; margin: 0 auto;">
  <img src="http://tvproart.pl/tvonline/splash/1247212657.07.09.jpg">
  </a>

But I did try the simplest configuration shorthand as well - same.
I've tried disabling all the potentially conflicting JS (including Google Analytics...) and CSS as well. Nothing.

Am I missing something terribly obvious here?
Here's the page where you can take a look at it:http://tvproart.pl/tvonline/obejrzyj2/971/Wydarzenia/2009-07-09
It's the same across systems and browsers (not so sure about IE, but FF linux/win and Safari produce the same behavior).

Any help, pointers and possible workarounds (such as how to trigger the player to work even without finding the real cause of the problem) will be deeply appreciated.

gmccomb

Posts: 667

Registered:
Apr 9, 2009

» Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Reply to: Flowplayer does not load until the container is clicked, from Moris
Why do you have a splash screen in your A tag AND one in your playlist? I'd get rid of the A tag and use a DIV, and then put your splash as the first item in the playlist.

Apart from this, if you have autoPlay set to true, then the player does not pause, and there is no reason for a splash screen. The splash screen is only used if the player is paused on startup.

Finally, there is no point in setting autoBuffering if you're not pausing on startup. The option is ignored (for obvious reasons) if the player automatically starts playing.

Maybe there are other issues with your code as well, but I stopped looking when I saw this.

See this page for a working example.

http://www.flowplayer.org/demos/configuration/playlist-splash.html

Moris

Posts: 5

Registered:
Apr 21, 2009

» » Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Reply to: » Flowplayer does not load until the container is clicked, from gmccomb
I won't waste your and my time on explaining WHY it was there... anyway, please forget that one... as I said, I've tried minimum config as well.

I am still fiddling with the code and here's the current setup which - unfortunately - produces the same (lack of) effect.

And I've even completely removed the splash from both places.


flowplayer(
             "player", 
             "http://tvproart.pl/swf/flowplayer.commercial-3.1.1.swf",
//embedding options
          {
    playlist: [
     
           {
            url: 'http://tvproart.pl/tvonline/materialy/1247292565.mpeg.flv',

            autoPlay: true
     
            }
           ]
        }
      );


<div id="player" style="width: 485px; height: 400px; text-decoration: none; margin: 0 auto 0 auto;"> 
	</div>

http://tvproart.pl/tvonline/obejrzyj2/971/Wydarzenia/2009-07-09

gmccomb

Posts: 667

Registered:
Apr 9, 2009

» » » Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Reply to: » » Flowplayer does not load until the container is clicked, from Moris
Start by making sure all the supplementary files where they are supposed to be:

flowplayer-3.1.1.min.js
flowplayer.controls-3.1.1.swf

The Flowplayer swf and video files are obviously found.

Going forward I'd reproduce the following page:

http://www.flowplayer.org/demos/installation/div-tag.html

and then work up from there. The configuration only contains the video to play. The player will automatically start. IOW, it does what yours does, but the configuration is simpler. Once you get it working, and there is no reason why it would not as long as the markup is correct and the files are in their proper places, you can enhance.

Moris

Posts: 5

Registered:
Apr 21, 2009

» » » » Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Reply to: » » » Flowplayer does not load until the container is clicked, from gmccomb
The files are where they belong, no interfering JS can be seen in the code.

The embeding code is as simple, as it can get:

 flowplayer(
           "player", 
           "http://tvproart.pl/swf/flowplayer.commercial-3.1.1.swf",
	    "http://tvproart.pl/tvonline/materialy/1247292565.mpeg.flv"
 );

Does work but only after the container is clicked. *sigh*.

EDIT: disabled the css for this demo-page as well.
No css, no JS to interfere... js and swf and the video in place.

Still the same stuff. This is my third implementation of flowplayer (at least) and so far it has been working flawlessly for me. This is strange.

See it here:
http://tvproart.pl/tvonline/obejrzyj2/974/Wydarzenia/2009-07-10

Moris

Posts: 5

Registered:
Apr 21, 2009

» » » » » Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Reply to: » » » » Flowplayer does not load until the container is clicked, from Moris
FIXED.

So, the problem was I had no idea that the container element (a or div) could not contain any inner HTML.
I did put a <img> tag there and later a   there cause I wanted the div to appear in it's proper size even before the js kicks in and fills it with the flowplayer instance.

Removing the code from within the container fixed the issue for me.
I'm still not sure if that's a bug or a feature, but now I am a bit smarter.

Thanks gmccomb for your will to help!

gmccomb

Posts: 667

Registered:
Apr 9, 2009

» » » » » » Flowplayer does not load until the container is clicked

Posted: Jul 11, 2009

Reply to: » » » » » Flowplayer does not load until the container is clicked, from Moris
Glad you got it to work, though it's a new one on me that you can't have HTML inside the container tag. There are a number of working examples that have just this, like an img tag within the a tag. But, whatever works..

As a note, you may want to not have a stop button if you have a static image as the first item in your playlist. Hitting stop before the video loads will prevent the player from playing anything else. You have to reload the page in this case.

The Play/Pause button is usually sufficient in these instances.

Moris

Posts: 5

Registered:
Apr 21, 2009

» » » » » » » Flowplayer does not load until the container is clicked

Posted: Jul 12, 2009

Reply to: » » » » » » Flowplayer does not load until the container is clicked, from gmccomb
Yes, we thought of that too, I was wondering about that stop behavior for some time.
I've already generally tidied up the code slightly, the pastes are from the time when I just desperately wanted to get it to work.

Cheers.

Phil

Posts: 1

Registered:
Jul 18, 2009

Same for me

Posted: Jul 18, 2009

Reply to: » » » » » Flowplayer does not load until the container is clicked, from Moris
This problem had me stumped for a few hours too (yes, I know I should've looked at the forums...). This needs to be documented in the installation guide to avoid others having the same issue.

FunkyRes

Posts: 25

Registered:
Sep 5, 2009

» » » » » » Flowplayer does not load until the container is clicked

Posted: Sep 7, 2009

Reply to: » » » » » Flowplayer does not load until the container is clicked, from Moris
Note -
I use (free player) div with html content inside.
on page load, javascript detects if flash version 9 or newer is installed, and if so, then removes all child nodes of the div for the flowplayer and launches player. That works and lets me have html fallback for when scripting is disabled or version of installed flash is too old.

The js I use to detect flash is here:
http://www.featureblend.com/javascript-flash-detection-library.html
It's bsd license and seems to work well.

To the other post regarding < a href="video.flv" stye="..." /> -

Even though it is legal validating xhtml to have a self closing anchor tag (IE for setting an id) it at least use to mess up every browser, that may be what the issue is.

chacham15

Posts: 3

Registered:
Jul 17, 2009

I had the same problem with a different resolution

Posted: Jul 17, 2009

Reply to: Flowplayer does not load until the container is clicked, from Moris
I had the same problem with a different resolution. In my case it was because i was closing tags inline. Im not sure if thats the right word, but as an illustration i was doing: < a href="video.flv" stye="..." />. When I chaged that to < a href=...>< /a> it loaded without being clicked on. (Spaces added so it doesnt get treated as html)