Solved

Flowplayer - Disable autoplay not working after adding analytics event

Posted on 2010-09-17
10
1,918 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Viewers will get an overview of how to make and use Drum Racks in Ableton Live. Load new Drum Rack into empty MIDI track: Fill rack with audio samples: Re-arrange sample slots as necessary: Adjust parameters of each slot to tailor each sound a…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now