This is a message.

Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX) Created Dec 19, 2008

This thread is solved

Views: 5708     Replies: 10     Last reply Jan 12, 2009  
You must login first before you can use this feature

jefffederman

Posts: 4

Registered:
Dec 19, 2008

Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX)

Posted: Dec 19, 2008

Hi,

So far I've been really impressed with Flowplayer, it's a great tool.

However, I'm having a problem with it loading via AJAX. Specifically, I'm using the jQuery plugin jqModal to generate a modal window. The jqModal call retrieves the modal window content via its AJAX method -- the call to Flowplayer is in that retrieved content.

The first time I click the link in the default.php page to generate the modal window, both the AJAX text content and Flowplayer appear fine. However, after I close the modal window, subsequent clicks on the link bring up the modal window w/the AJAX text content, but no Flowplayer.

I'm a novice coder, but my guess is that this has something to do with event binding/delegation on the call to Flowplayer. I've searched through the forums for 'jqModal' and 'ajax' but didn't find a response that related to my issue.

Here is the relevant code:

1. default.php (the pre-existing page, which includes external script links to the jQuery, jqModal, Flowplayer and ajaxtest js files)


<body>
	<a href="#" class="jqModal">Click here for AJAX</a>
	<div id="ajax" class="jqmWindow">		
	</div>
</body>

2. ajax.php (the remotely loaded content)


<a href="#" class="jqmClose">Close</a>
<br />
<h2 class="centered">AJAX works!</h2>
<a id="player" class="flowplayer" href="video/test.flv"></a>

3. ajaxtest.js


var loadFlowplayer = function() {
	$("#player").flowplayer("/swf/flowplayer-3.0.2.swf");
}

$(document).ready(function() {	
	$("#ajax").jqm({ajax: 'ajax.php', onLoad: loadFlowplayer});
});

Any help is much appreciated!

Cheers,
Jeff

squarefactor

Posts: 2

Registered:
Sep 3, 2008

» Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX)

Posted: Dec 19, 2008

Reply to: Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX), from jefffederman
I am also looking for an answer to this right now. I am hoping that I dont need to rewrite my code to remove the ajax call. Currently the flowplayer works great on the initial html, but once the ajax call is made, an attempt to call flowplayer() on the new html chunk from the server is failing.

UPDATE:
I am now finding it to be a bit random. The initial video in my new html chunk never plays, but if I click one of the thumbnails I have that tell it to play a new clip, sometimes it works. By sometimes I mean if it works once they continue to work, but if I refresh and try again, they may not work at all.

I finally got an error to show up in the Safari web inspector:

Value undefined (result of expression self._api().fp_play) is not object.

I see that call in 2 places in the flowplayer.js, Perhaps this will help us find the issue.

jefffederman

Posts: 4

Registered:
Dec 19, 2008

jqModal not the problem

Posted: Dec 21, 2008

Reply to: Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX), from jefffederman
I further simplified the problem by removing the jqModal component, so my problem appears to be with Flowplayer and AJAX. When you click the link, the script loads new html, and then a callback function instantiating Flowplayer, as well as triggering an alert from a new link.

The first time the AJAX loads, Flowplayer appears properly and the alert triggers properly. But on subsequent loads, the alert still triggers properly, but Flowplayer does not appear.

Any help is greatly appreciated! The code is below.

1. index.html

<body>
	<a id="ajaxLink">Get new AJAX content</a>
	<div id="ajax"></div>
</body>
2. ajax.html

<a id="player"></a>
<a id="getAlert">Click for alert</a>
3. ajax.js

var loadFlowplayer = function() {
	$("#player").flowplayer("/swf/flowplayer-3.0.2.swf", {
		clip: {
			url: '/video/ab_raise.flv',
			autoPlay: false  
		}
	});
	$('#getAlert').click(function() {
		alert('Callback binding properly');
		return false;
	});
}

$(document).ready(function() {
	$('#ajaxLink').click(function() {
		$('#ajax').load('ajax.html', loadFlowplayer);
		return false;
	});	
});

Cheers, and happy holidays!

Jeff

jefffederman

Posts: 4

Registered:
Dec 19, 2008

Getting flashembed() to properly point to .flv file?

Posted: Dec 22, 2008

Reply to: jqModal not the problem, from jefffederman
Sorry for continuing to respond to my own question, but this issue is driving me nuts :( ....

I've made what might be considered progress on the issue. Instead of calling loadFlowplayer() as my AJAX callback, I substituted the following function, loadFlashEmbed(), which attempts to call the flashembed function on the player link...


var loadFlashEmbed = function() {
	$('#player').flashembed('/swf/flowplayer-3.0.2.swf', {
		config: {
			clip: {
				url: '/video/test.flv',
				autoPlay: false
			},
			playerId: 'player',
			playList: [{ url: '/video/test.flv', autoPlay: false}]
		}
	});
	$('#player embed').attr({
		id: 'player_api',
		bgcolor: '#000000',
		name: 'player_api'
	});
}

With this function, the player appears every time the AJAX content loads (a big improvement). Unfortunately, it's just a blank screen -- the calls to the clip.url and playlist.url properties don't appear to be working the way I've written the code.

Any ideas as to how I could modify the script to properly point to my .flv file? Or even better, how to properly call flowplayer() instead of flashembed() so that everything works every time I make the AJAX call (not just the first time).

Cheers,
Jeff

Edge
Vizmu Media ------------------- http://vizmu.com/

Posts: 576

Registered:
Nov 29, 2008

» Getting flashembed() to properly point to .flv file?

Posted: Dec 22, 2008

Reply to: Getting flashembed() to properly point to .flv file?, from jefffederman
Have you tried the debug setup mentioned here >http://flowplayer.org/forum/2/10190#post-10191

Might make tracking down the error a bit easier ;)

jefffederman

Posts: 4

Registered:
Dec 19, 2008

Flowplayer doesn't appear in subsequent AJAX calls

Posted: Dec 25, 2008

Reply to: » Getting flashembed() to properly point to .flv file?, from edge
Thanks for the suggestion about using the Flowplayer debug code and the Flash Debug Player. Unfortunately, they haven't helped me figure out the problem, but maybe it will switch on a light bulb to someone reading this (or having the same problem). The code I'm using is referred to in my second post in this thread('jqModal not the problem'), with the following modifications to loadFlowplayer():


var loadFlowplayer = function() {
	$("#player").flowplayer("/swf/flowplayer-3.0.2.swf", {
		clip: {
			url: '/video/ab_raise.flv',
			autoPlay: false  
		},
		log: {
			level: 'debug'
		}
	});
	$('#getAlert').click(function() {
		alert('Callback binding properly');
		return false;
	});
}

When I load the AJAX Flowplayer the first time (i.e., when it loads/works fine), Firebug shows a LONG list of log entries (hundreds). When I attempt to load the AJAX Flowplayer a second time (without refresh), Firebug shows NO log entries.

Similarly, when I load the AJAX Flowplayer the first time, the Flash Debug Player logs the following to flashlog.txt:

adding 'render' event listener to container [object Stage]
adding 'render' event listener to container [object Stage]
AbstractLayout.addConstraint
AbstractLayout.addConstraint
AbstractLayout.addConstraint
AbstractLayout.addConstraint

When I load the AJAX Flowplayer a second time, Flash Debug Player logs nothing.

Ultimately, I would like to get this working, but for now, I swapped Flowplayer for the JW FLV player, and everything works properly.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1868

Registered:
Nov 16, 2007

» Flowplayer doesn't appear in subsequent AJAX calls

Posted: Dec 30, 2008

Reply to: Flowplayer doesn't appear in subsequent AJAX calls, from jefffederman
If Flowplayer is already installed on a certain wrapper it does not reinstall it. This is our current design choise. You should install the player on page load and on the ajax calls you can make API calls such as play or setPlaylist

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1868

Registered:
Nov 16, 2007

Issue fixed in 3.0.3

Posted: Jan 2, 2009

Reply to: » Flowplayer doesn't appear in subsequent AJAX calls, from tipiirai
I just fixed this issue to upcoming 3.0.3. When player will be reinstalled to the same same node it will do that with the new configuration. Should be out in few weeks.

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1868

Registered:
Nov 16, 2007

» Issue fixed in 3.0.3

Posted: Jan 7, 2009

Reply to: Issue fixed in 3.0.3, from tipiirai
yes. this is now done. just upgrade your flash and javascript modules and everything should work.

donaldjoyus

Posts: 4

Registered:
Jan 12, 2009

» Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX)

Posted: Jan 12, 2009

Reply to: Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX), from jefffederman
I found in my code that I had to update the id of the div tag with each ajax call so that flowplayer thought that it was referencing a different player on the page. We are using JSF with seam so my code looks like the code given below.

Note that the id on the "a" tag and javascript player id becomes a variable sent from our backend. The id is then updated on each call to the backend for a new video. This seems to convince flowplayer that it is showing a new player and the new video appears.

I am not sure if yours is the same problem, but this was my solution.


<a style="display:block;width:118px;height:120px"
    id="#{contentFileChooser.videoPlayerId}"> </a><br/>																					
											<script language="JavaScript"> 
   $f('#{contentFileChooser.videoPlayerId}',
   '/flash/flowplayer-3.0.3.swf',
   '/itk/video/#{userChoiceInfo.selectedNodeUuid}.
         #{userChoiceInfo.extension}');
</script>

Tero
Author of jQuery Tools and this website + JavaScript developer of Flowplayer.

Posts: 1868

Registered:
Nov 16, 2007

Not nessessary anymore

Posted: Jan 12, 2009

Reply to: » Flowplayer doesn't appear in subsequent calls to jqModal window (via AJAX), from donaldjoyus
update of the is no longer nessessary in 3.0.3