Linear

Multiple wideos on same page (Projekktor Core)

by Mei, Tuesday, May 08, 2012, 18:26 (382 days ago)

I am using Projekktor with Fancybox in a Wordpress theme.

Here is the page: http://ennio.crumplepop[dot]com/a-fancybox-video-page/

This is the code I added before </head>:

<!-- Start Fancybox -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script type="text/javascript" src="<?php bloginfo('template_url') ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" href="<?php bloginfo('template_url') ?>/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
	<!-- End -->
	
	<!-- Start Projekktor -->
	<script type="text/javascript" src="/projekktor/projekktor-1.0.13r41.min.js"></script>
	<link rel="stylesheet" href="/projekktor/theme/style.css" type="text/css" media="screen" />
	<!-- End -->

<!-- Apply Projekktor to all HTML5 media elements -->
    <script type="text/javascript">
		$(document).ready(function() {
			var myPlayer = projekktor('video', {
				/* path to the MP4 Flash-player fallback component */
				playerFlashMP4:        '/projekktor/jarisplayer.swf',
				controls: false,
				autoplay: false,
				volume: 0.8
			});
			   
			var popup = $("#popup").fancybox({
				'onComplete':function(){
					myPlayer.reset();
					myPlayer.setPlay();
				},
				'onCleanup':function(){
					myPlayer.setStop();
				},
				'titlePosition'		: 'none',
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
			});
		});
	</script>

	<!-- End -->

And this is the code in my Wordpress page:

<div class="videolist">

<div class="videomodule">

	<a id="popup" href="#inline1" title="Fancybox meets Projekktor &lt;3">
		<img src="/promo/640/transimatic640.jpg" />
	</a>
	<div style="display: none;">
		<video id="inline1" class="projekktor" poster="/promo/640/transimatic640.jpg" title="This is Projekktor" width="640" height="360" controls>
		<source src="/wp-content/themes/grid_focus/images/bunny/TransiMatic-video-fixed.mp4" />
	</div>

</div>


<div class="videomodule">
        <a id="popup" href="#inline2" title="Fancybox meets Projekktor &lt;3">
		<img src="http://ennio.crumplepop.com/promo/640/platinotype640.jpg" />
	</a>
	<div style="display: none;">
		<video id="inline2" class="projekktor" poster="http://ennio.crumplepop.com/promo/640/platinotype640.jpg" title="This is Projekktor" width="640" height="360" controls>
		<source src="http://ennio.crumplepop.com/promo/platinotype-640x360.mp4" />
	</div>
</div>

</div>

For some reason though, the first video loads, but I cannot exit the fancybox. Autoplay also does not work...

Any insight would be really helpful!!

  1023 views
Avatar

Multiple wideos on same page

by sascha ⌂ @, Wednesday, May 09, 2012, 09:55 (382 days ago) @ Mei

For some reason though, the first video loads, but I cannot exit the fancybox.

Your script runs into an "myPlayer.setStop() is not a function" error which breaks further actions.

If you init Projekktor with "projekktor('video');" in your example "myPlayer" will hold an Array of two Players - one element for each <video> on page.

It´s better to apply unique IDs to each <video> and init the player e.g. this way: "myPlayerOne = projekktor('#videoone'); myPlayerTwo = projekktor('#videotwo');.

Autoplay also does not work...

Autoplay works but your video is buffered completely first before playbacl starts. It´s a common issue. Please check this forum entry.

- sascha

---
Help keeping free Projekktor support alive. Consider to buy supporter license: http://shop.projekktorxl.com/shop/supporter-license/

Tags:
multi, player, array, unique, id

  1014 views

Multiple wideos on same page

by Mei, Thursday, May 17, 2012, 03:49 (374 days ago) @ sascha

Thanks Sascha, it worked wonderfully!

  885 views