2013-03-20 49 views
1

嘗試解決這個問題並沒有太多好運。使用javascript循環的HTML5視頻

我有像這樣一個視頻的視頻標籤:

<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> 

而且使用JavaScript和jQuery IM通過列表項試圖循環(這個列表可以更長或更短這將是用戶控制)並把它們放到視頻本身,這正常工作與此:

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(); 
    } 


}); 

(此代碼是從其他來源作爲參考,我忘了在哪裏)。然而,我在做的麻煩是停止視頻,一旦它已經遍佈全部3.控制檯日誌'here 1'會觸發一次所有3個視頻都播放過,但我無法計算一旦它播放完成後如何停止視頻一旦。

任何幫助將是太棒了。

回答

3

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

超級明星之前

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

只需加入!非常感謝。 (Y) – 2013-03-20 12:45:31