?
Solved

Flowplayer - Disable autoplay not working after adding analytics event

Posted on 2010-09-17
10
Medium Priority
?
2,003 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn the basics of making and using Impulse Kits in Ableton Live. Load new Impulse into an empty MIDI track: Fill the 8 empty sample slots with drum samples: Adjust parameters to tailor each sound as desired: Proceed to create be…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

801 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