html5 video playlist in wordpress using ajax through jquery - php

Question

So I am using the jsplayer HTML5 player on my wordpress site, as well as some custom script to load in the next post and replace the old content once the video is finished:
$(document).ready(function(){
$(".video-js").livequery('ended', function(){
var sStr = "<?php echo get_permalink(get_adjacent_post(true,'',true)); ?>";
var adj_numb = "<?php
$adj = get_adjacent_post(true,'',true);
$numb = $adj->ID;
echo $numb
?>";
var cur_numb = "<?php echo $post->ID; ?>";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
This works great, for 2 videos. It loads in the next video and plays it, and one after that, but after the 3nd video plays it just stops. I figure this means I have to sort of "reset" all my variables and start again from the beginning of the script, and that it's not doing this because of $(document).ready(function(), as it's already all loaded at this point.
Is there a standard way to loop through this script again, and re-set all the variables after its run once?
Or am I approaching the whole issue incorrectly?
Thanks!
Rendered JS:
$(document).ready(function(){
$(".video-js").livequery('ended', function(){
var sStr = "http://www.theloniousfilms.com/zachmath/volkswagon/";
var adj_numb = "94";
var cur_numb = "96";
$.post(sStr, function(data) {
var content = $( data ).find( '#post-' + adj_numb);
$( "#post-" + cur_numb ).html( content );
var vid = VideoJS.setup( "vid" );
vid.play();
});
});
});
HTML:
<div class="post-96 post type-post status-publish format-standard hentry category-zachmath" id="post-96">
<h2 id="director">Director Name</h2>
<h2 id="post_title">Post-Name
<span id="post_name">
"Hot Tub"
</span>
<span id="home">HOME</span>
<div class="entry">
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody --><br />
<video id="vid" class="video-js" width="640" height="360" preload autoplay poster="http://www.site.com/wp-content/uploads/2011/03/poster.jpg"><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><br />
<source src="http://d29zgp48wvs9kv.cloudfront.net/orkin.ogv" type='video/ogg; codecs="theora, vorbis"' /><br />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --><br />
<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash"<br />
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://www.theloniousfilms.com/wp-content/uploads/2011/03/poster.jpg", {"url": "http://d29zgp48wvs9kv.cloudfront.net/orkin.m4v","autoPlay":true,"autoBuffering":true}]}' /><!-- Image Fallback. Typically the same as the poster image. --><br />
</object><br />
</video>
</div>

Answer 1

I ended up going with a different method, where I pulled all the posts URLs into a array, then iterated through each of them, going to the next item in an array once playback finished.