2013-03-20 4 views
1

pas eu beaucoup de chance à essayer de comprendre cela.vidéo HTML5 avec javascript boucle

J'ai une balise vidéo avec une vidéo comme ceci:

<video id="video" preload="auto" tabindex="0" controls poster="img/layout/Untitled-1.jpg"> 
     <source type="video/mp4" src="video/1.mp4" > 
     Sorry, your browser does not support HTML5 audio. 
    </video> 
    <ul id="playlist"> 
     <li class="active"><a href="video/1.mp4">GetFighted</a></li> 
     <li><a href="video/2.mp4">ThatGirlPossessed</a></li> 
     <li><a href="video/3.mp4">WhiteDevil</a></li> 
    </ul> 

Et en utilisant javascript et im jquery essayant de boucle à travers les éléments de liste (cette liste pourrait être plus ou moins long, il sera contrôlé par l'utilisateur) et les mettre dans la vidéo elle-même, cela fonctionne très bien avec ceci:

jQuery(document).ready(function($) { 
    var video; 
    var playlist; 
    var tracks; 
    var current; 


    init(); 
    function init(){ 
     current = 0; 
     video = $('video'); 
     playlist = $('#playlist'); 
     tracks = playlist.find('li a'); 
     len = tracks.length; 
     video[0].volume = .50; 
     playlist.find('a').click(function(e){ 
      e.preventDefault(); 
      link = $(this); 
      current = link.parent().index(); 
      run(link, video[0]); 
     }); 

     video[0].addEventListener('ended',function(e){ 
      $('#video').animate({opacity: 0}, 500); 
      setTimeout(function(){ 
       current++; 
       if(current == len){ 
        current = 0; 
        link = playlist.find('a')[0]; 
        console.log('here 1'); 
       } else { 
        link = playlist.find('a')[current]; 
        console.log('here');  
       } 

       $('#video').animate({opacity: 1}, 500); 
       run($(link),video[0]); 
      },500); 
     }); 
    } 

    function run(link, player){ 
      player.src = link.attr('href'); 
      par = link.parent(); 
      par.addClass('active').siblings().removeClass('active'); 
      video[0].load(); 
      video[0].play(); 
    } 


}); 

(ce code a été pris d'une autre source comme référence, je ne sais plus où). Cependant, ce que j'ai de la difficulté à faire est d'arrêter la vidéo une fois qu'elle a bouclé tous les 3. Le journal de console 'ici 1' se déclenche une fois que les 3 vidéos ont été jouées mais je n'arrive pas à comprendre comment arrêter la vidéo une fois que.

Toute aide serait fantastique.

Répondre

3

Il suffit d'ajouter

video[0].addEventListener('loadstart', function(e){ 
    video[0].pause(); 
}); 

avant

console.log('here 1'); 
+0

Super star !! Merci beaucoup pour cela. (Y) –