简体   繁体   中英

Loop through a jQuery .post function multiple times

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").bind('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 exactly one video. It loads in the next video and plays it, but after the 2nd 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?

Thanks!

EDIT: Rendered JS:

    $(document).ready(function(){
        $(".video-js").live('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">Zach Math</h2>

            <h2 id="post_title">Orkin - 
                <span id="post_name">

                "Hot Tub"
                 </span>
                 <span id="home"><a href="http://www.theloniousfilms.com/">HOME</a></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.theloniousfilms.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>

Looks like the HTML is being rewritten by

$( "#post-" + cur_numb ).html( content );

Change

$(".video-js").bind('ended', function(){

to

$(".video-js").live('ended', function(){

that should take care of it.

Also, change

$( "#post-" + cur_numb ).html( content );

with

$( "#post-" + cur_numb ).replaceWith( content );

我最后只是将所有发布网址拉到一个数组中,然后遍历它们中的每个,一旦上一个视频播放完毕,就移到数组中的下一个项目。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM