Solved

Flowplayer - Disable autoplay not working after adding analytics event

Posted on 2010-09-17
10
1,943 Views
Last Modified: 2013-12-07
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

0
Comment
Question by:JackHodson
  • 3
  • 3
10 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 33745822
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
 
LVL 14

Accepted Solution

by:
Ramuncikas earned 500 total points
ID: 33748412
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
 
LVL 14

Expert Comment

by:Ramuncikas
ID: 33748426
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 4

Author Comment

by:JackHodson
ID: 33768497
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
 
LVL 14

Assisted Solution

by:Ramuncikas
Ramuncikas earned 500 total points
ID: 33776316
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
 
LVL 4

Author Comment

by:JackHodson
ID: 33777146
Perfect, thank you.
0
 
LVL 4

Author Closing Comment

by:JackHodson
ID: 33777151
Solution posted.
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Viewers will learn how to turn a Live Set into a compressed Live Pack file, and how to install Live Packs. Make: File > Collect All And Save: File > Manage Files: Click Manage Project: Click Create Pack: Select save location: Install: Doub…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question