Vidéo HTML5 - Charger et décharger vidéo tag avec jQuery

Je suis le développement d'un site web avec un gros curseur qui utilise 100% de la largeur et de la hauteur de diapositives. Je suis l'aide de quelques vidéos comme arrière-plan à l'intérieur d'un couple de diapositives. Alors que j'ai essayé de nombreux plugins, certains ont travaillé de façon erratique avec jScrollPane je me suis donc retrouvé à l'aide de "simpleVideo plugin jQuery" (https://github.com/markupboy/simpleVideo).

Le plugin utilise la balise vidéo pour tout jouer. Je suis, y compris une vidéo d'une balise à l'intérieur de chaque page, comme ceci:

            <div class="rsImg page" id="page1">

                <video poster="video/poster.png" id="video-intro">
                    <source src="video/trailer_480p.ogg" type="video/ogg">
                    <source src="video/video.mp4" type="video/mp4">
                </video>


            </div>
            <!-- END OF PAGE 1-->

Vidéo joue et se comporte correctement, c'est agréable.

Mais comme je l'ai ajouter plus de diapositives, je suis inquiet à propos de l'utilisation de la mémoire et de la lenteur dans l'ensemble de l'expérience.

J'ai une fonction qui attend un "SlideChange" de l'événement, afin de détruire la vidéo ne sera pas un problème une fois que les changements de diapositives, comme ceci:

  poshSlider.ev.on('rsAfterSlideChange', function() {
if(poshSlider.currSlideId+1!=1)
{
  $('#video-intro').trigger('stop');
  $('video').empty().remove();
} else {
  $('#page1').append('<video poster="video/poster.png" id="video-intro"><source src="video/video.mp4" type="video/ogg"><source src="video/video.mp4" type="video/mp4"></video>');
  $('#video-intro').simpleVideo();
  $('#video-intro').trigger('play');
}
});

J'ai donc essayé avec la vidange et la suppression de la div, de la vidéo et de balise. Ensuite, pour réinitialiser la vidéo j'ai pensé à l'ajout du même code au même endroit, mais il ne fonctionne pas comme prévu et je ne sais pas si c'est une bonne façon quand il s'agit de prendre soin de fuites de mémoire.

Ce serait une façon de chargement et de déchargement des vidéos vu que mon approche?

EDIT:

J'ai été en utilisant "ajouter" au lieu de "html". Mon code fonctionne maintenant comme ça, j'ai juste besoin de s'occuper de la mémoire augmente et certains genre de collecte des ordures. Des conseils?

   poshSlider.ev.on('rsAfterSlideChange', function() {
if(poshSlider.currSlideId+1!=1)
{
  $('#video-intro').trigger('stop');
  $('video').empty().remove();
} else {
  $('#page1').html('<video poster="video/poster.png" id="video-intro"><source src="video/trailer_480p.ogg" type="video/ogg"><source src="video/video.mp4" type="video/mp4"></video>');
  $('#video-intro').simpleVideo();
  $('#video-intro').trigger('play');
}
});

OriginalL'auteur INVASORIA | 2012-11-01