자바 스크립트를 사용하는 HTML5 동영상 플레이어

Question

HTML5 동영상 재생 목록 용 클라이언트 측 솔루션을 구축하려고하는데이 프로젝트에 AJAX 또는 XML을 사용할 수 없어 일부 문제가 발생합니다.

기본적으로 한 비디오에는 비디오 태그가로드되어 있고 그 안에 모든 비디오가 들어있는 '재생 목록'이라는 정렬되지 않은 목록이 있습니다. 나는 그것이 재생 목록으로 Moves 또는 Ogv를 한 페이지에서 재생할 수 있도록 작동하지만 목록 내에서 대체 작업을 수행 할 수는 없습니다. 나는 조금 붙어있다, 나는 그 브라우저가 스니핑은 오래된 연습이지만, 해결책을 찾지 못한다고 읽었다. 어떤 도움이라도 대단히 감사하겠습니다! 나는 당신의 HTML 조금 변경하고 난 소스 태그를 모두 대체 할 수있는 "실행()"기능을 변경 한

**HTML** 
    <!-- /playlist --> 

<div class="span2"> 
    <ul id="playlist"> 
     <li class="active"> 
      <a href="disc_content/video/retro_photography_effects/film_burn.mov"/><img src="images/video/image1.jpg" style="margin-bottom:21px;"></a> 
      <a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"><img src="images/video/image1.jpg" style="margin-bottom:21px;"></a> 
     </li> 

     <li> 
      <a href="disc_content/video/retro_photography_effects/holga.mov" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
      <a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"></a> 
     </li> 

     <li> 
      <a href="disc_content/video/retro_photography_effects/holga.mov" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
      <a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"></a> 
     </li> 

     <li> 
      <a href="disc_content/video/retro_photography_effects/holga.mov" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
      <a href="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"></a> 
     </li> 
    </ul> 
</div> 

    <!-- /playlist --> 

    <!-- /video --> 

<div class="span9"> 
    <video id="video" width="960" height="600" controls="controls" autoplay="autoplay"> 
     <source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" /> 
     <source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" /> 
     <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie"> <img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" /></a> 
     <p> Your video tag is not supported</p> 
    </video>      
</div>   


    <!-- /video --> 

**Javascript** 
<!-- Video Playlist START --> 

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 - 1; 
    video[0].volume = .60; 
    video[0].play(); 
    playlist.find('a').click(function(e){ 
     e.preventDefault(); 
     link = $(this); 
     current = link.parent().index(); 
     run(link, video[0]); 
    }); 
    video[0].addEventListener('ended',function(e){ 
     current++; 
     if(current == len){ 
      current = 0; 
      link = playlist.find('a')[0]; 
     }else{ 
      link = playlist.find('a')[current];  
     } 
     run($(link),video[0]); 
    }); 
} 
function run(link, player){ 
     player.src = link.attr('href'); 
     par = link.parent(); 
     par.addClass('active').siblings().removeClass('active'); 
     video[0].load(); 
     video[0].play(); 
} 

<!-- Video Playlist END --> 

Answer 1

**HTML** 
<!-- /playlist --> 

<div class="span2"> 
<ul id="playlist"> 
    <li class="active"> 
     <a href="disc_content/video/retro_photography_effects/film_burn.mov" rel="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv"/><img src="images/video/image1.jpg" style="margin-bottom:21px;"></a> 
    </li> 

    <li> 
     <a href="disc_content/video/retro_photography_effects/holga.mov" rel="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
    </li> 

    <li> 
     <a href="disc_content/video/retro_photography_effects/holga.mov" rel="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
    </li> 

    <li> 
     <a href="disc_content/video/retro_photography_effects/holga2.mov" rel="http://www.advancedphotoshop.co.uk/discs/102/ogvs/holga.ogv" /><img src="images/video/image2.jpg" style="margin-bottom:21px;"></a> 
    </li> 
</ul> 
</div> 
<!-- /playlist --> 
<!-- /video -->div class="span9"> 
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay"> 
    <source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" /> 
    <source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" /> 
    <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie"> <img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" /></a> 
    <p> Your video tag is not supported</p> 
</video>      
</div>  
<!-- /video --> 





//Javascript 
function run(link, player){ 
    $(player).children().eq(0).attr("src",link.attr('href')); 
    $(player).children().eq(1).attr("src",link.attr('rel')); 
    par = link.parent(); 
    par.addClass('active').siblings().removeClass('active'); 
    video[0].load(); 
    video[0].play(); 
} 

-

여기에 지금까지 내 코드입니다.