?
Solved

Flowplayer - Disable autoplay not working after adding analytics event

Posted on 2010-09-17
10
Medium Priority
?
2,043 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
7 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 2000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
Viewers will learn the basics of using Ableton Live's advanced sampler instrument, Sampler. Load new Sampler into an empty MIDI track: Select a sample and drop it into sample window in Sampler: Adjust pitch if necessary with Root Key setting: …
Viewers will learn how to use LFOs to modulate the sound of their Sampler instruments. Click the Modulation tab in Sampler: Choose one (or more) of the three available LFOs, and click the respective button to turn it on: Select a waveform, an LF…
Suggested Courses
Course of the Month14 days, 17 hours left to enroll

840 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