poblem playing mp4 videos, reloading with ajax

Vitoko commented 11 years ago

Hi everyone, i'm gonna try to resume my code as much as possible:

i have this page, show.php:

<php> // a lot of php code <?>
<html>
<head> //load jquery and Anythingslider stuff </head>
<script>
  $(function(){
   // ask every 30 seconds if there is a new principal.php page with a new videos, then load in  div #principalMovie
  }
</script>
<body>
<div id="principalMovie">
// load principal.php with this code:
<script type="text/javascript">
            var objajax = $.get("div_principal.php", {idC: "1"});
            objajax.success(function(respuesta,textostatus){
               $("#principalMovie").html(respuesta);                
            });
<script>
</div>
</body>
</html>

So... the first time when i load show.php, everything is normal (i put a console message inside isVideoPlaying() that shows the current time of video, like:

isVideoPlaying()function(slider){
  // code
  count++;
  if(count>=8){
    console.log('current time: '+vid[0].currentTime);
    count = 0;
  }
}

this, shows that message every 17 seconds more or less.

Ok, here is the problem: when show.php found new videos, reload the page div:principal.php into the div, and it seems to slideshows do a goForward() function, and create a second instance or something, beacouse now, the message shows every 7-8 seconds, when differents times (old video and new video playing i guess)...

¿what I can do? i mean, refreshing the page, clean all variables, times, etc.

Thanks and sorry with my english..

Mottie commented 11 years ago

Hi @Vitoko!

I'm guessing the #principalMovie div contains AnythingSlider? If that is true, then the ajax success code is completely replacing the slider. You will then need to re-initialize AnythingSlider on the new code.

First, I would move the script inside of #principalMovie into the document head, then try something like this:

objajax.success(function(respuesta,textostatus){
    $("#principalMovie")
        .html(respuesta)
        .find('#slider')
        .anythingSlider({ /* options */ })
        .anythingSliderVideo({ /* options */ });
});

Vitoko commented 11 years ago

Hi @Mottie! Your solution works fine!! now everything is more stable.. thanks!

Mottie commented 11 years ago

Awesome! :)

CSS-Tricks / AnythingSlider

poblem playing mp4 videos, reloading with ajax #532