Flowplayer - Disable autoplay not working after adding analytics event

Hi there,

I am newish to using flowplayer and I have integrated Google Analytics in to the code using the guide from the Flowplayer website:
http://flowplayer.org/demos/events/google-analytics.html

This is the webpage in question: http://www.infomedltd.co.uk/events/10_11_rac10/about_test.htm

Since doing this, the code that should prevent autoPlay does not work:
autoPlay: false,

What is strange is that since I added a second video to the page, the first video does not auto play but the second one does!

I would appreciate any help in solving this. I can not get any reply on the Flowplayer forum unfortunately.

Many thanks,
Jack

This is my anaytics code from the webpage, I think it is correct but I am only showing a few results Analytics from the day when I set it up:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'MY CODE HERE - REMOVED FOR EE QUESTION']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    var _tracker = _gat._getTracker("MY CODE HERE - REMOVED FOR EE QUESTION");
  })();

</script>
<div>
<a href="videos/video_1.flv" id="rac_player_1"
	style="display:block;width:320px;height:240px"></a>

<script>
flowplayer("rac_player_1", "../../flowplayer-3.2.4.swf", {
    clip:  {
        autoPlay: false,
        autoBuffering: true
    }
});
</script>

<script>
// get handle to info element
var info = document.getElementById("info");

$f("rac_player_1", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", { 
        
		clip: {
		// track start event for this clip
		onStart: function(clip) {
			_tracker._trackEvent("Videos", "Play", clip.url);
		},

		// track pause event for this clip. time (in seconds) is also tracked
		onPause: function(clip) {
			_tracker._trackEvent("Videos", "Pause", clip.url, parseInt(this.getTime()));
		},

		// track stop event for this clip. time is also tracked
		onStop: function(clip) {
			_tracker._trackEvent("Videos", "Stop", clip.url, parseInt(this.getTime()));
		},

		// track finish event for this clip
		onFinish: function(clip) {
			_tracker._trackEvent("Videos", "Finish", clip.url);
		}
	},

	// show stop button so we can see stop events too
	plugins: {
		controls: {
			stop: true
		}
	}
	
});
</script>
      </div>    
      

<div>
<a href="videos/video_2.flv" id="rac_player_2"
	style="display:block;width:320px;height:240px"></a>

<script>
flowplayer("rac_player_2", "../../flowplayer-3.2.4.swf", {
    clip:  {
        autoPlay: false,
        autoBuffering: true
    }
});
</script>

<script>
// get handle to info element
var info = document.getElementById("info");

$f("rac_player_2", "http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", { 
        
		clip: {
		// track start event for this clip
		onStart: function(clip) {
			_tracker._trackEvent("Videos", "Play", clip.url);
		},

		// track pause event for this clip. time (in seconds) is also tracked
		onPause: function(clip) {
			_tracker._trackEvent("Videos", "Pause", clip.url, parseInt(this.getTime()));
		},

		// track stop event for this clip. time is also tracked
		onStop: function(clip) {
			_tracker._trackEvent("Videos", "Stop", clip.url, parseInt(this.getTime()));
		},

		// track finish event for this clip
		onFinish: function(clip) {
			_tracker._trackEvent("Videos", "Finish", clip.url);
		}
	},

	// show stop button so we can see stop events too
	plugins: {
		controls: {
			stop: true
		}
	}
	
});
</script>
      </div>

Open in new window

LVL 4
JackHodsonIT ManagerAsked:
Who is Participating?
 
RamuncikasConnect With a Mentor Commented:
Thr problem was that you were calling $f() aka flowplayer() function two times in your code. The third call to a $f() function was reseting your autoplay property. Below is a script I came up to. As you can see I have merged second and third calls into one. Looks like working. Just change urls to videos back to origina ones and fix event handlers.
Tested on latest FireFox with latest Firebug.

HTH

// R

P.S.
Event handlers act wierd, e.g. onStart is called only once. But that's another question ;)
<div>
	<a href="video1.flv" id="rac_player_1" style="display: block; width: 320px; height: 240px;"></a>

	<script type="text/javascript">
		$f(
			"rac_player_1", 
			"http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", 
			{
				clip:  
				{
					autoPlay: false,
					autoBuffering: true
				}
			});
	</script>
</div>    
<div>
	<a href="video2.flv" id="rac_player_2" style="display: block; width: 320px; height: 240px"></a>
	<script type="text/javascript">
		$f(
			"rac_player_2", 
			"http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", 
			{
				clip:  
				{
					autoPlay: false,
					autoBuffering: true,
					onStart: function(clip) {
						console.log("start");
					},
					onPause: function(clip) {
						console.log("pause");
					},
					onStop: function(clip) {
						console.log("stop");
					},
					onFinish: function(clip) {
						console.log("finish");;
					}
					
				},
				plugins: {
					controls: {
						stop: true
					}
				}
			});
	</script>
</div>

Open in new window

0
 
b0lsc0ttIT ManagerCommented:
Did you have both videos on the page before adding GA (Google Analytics)?  If so were both not auto-playing?  If you just had one then I would like you to try removing the GA code and see if the 2 videos will work as you want (i.e. not auto-play).

Where is the code in the question for GA in relation to the snippet that is right below it?

bol
0
 
RamuncikasCommented:
Some typos:
<...>Thr problem was that you were calling $f() aka flowplayer() function two times in your code<...>
"two times" meaning two times for the same player instance
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
JackHodsonIT ManagerAuthor Commented:
Thank you, I have tried this and it works perfectly.

Just a quick question on it as my understanding of this code is extremely limited. The event handlers now apply to both videos?
Could this apply to 3 videos if I just put this code at line 17?

Thanks,
Jack
<div>
	<a href="new.flv" id="new_video" style="display: block; width: 320px; height: 240px;"></a>

	<script type="text/javascript">
		$f(
			"new_video", 
			"http://releases.flowplayer.org/swf/flowplayer-3.2.4.swf", 
			{
				clip:  
				{
					autoPlay: false,
					autoBuffering: true
				}
			});
	</script>
</div>  

Open in new window

0
 
RamuncikasConnect With a Mentor Commented:
No, event handler apply only for a video contained in "rac_player_2" (from my code)

Imagine call to $f() function as a process. If you have two cars with flat tires fixing one tire will not fix the other one although process will be pretty much the same.

So you have to have pretty much the same calls to $f() function to setup each video. Only the first parameter (id) will be different. I think your calls to $f() function will be something like in my code snippet at line #20 but for EACH VIDEO.

And yes, you can call this fos as many videos as you like

// R


0
 
JackHodsonIT ManagerAuthor Commented:
Perfect, thank you.
0
 
JackHodsonIT ManagerAuthor Commented:
Solution posted.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.