Multiple wideos on same page (Projekktor Core)
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 <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 <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!!
Multiple wideos on same page
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/
Multiple wideos on same page
Thanks Sascha, it worked wonderfully!
