HTML5 видео, ожидающее окончания видео, ожидая видео готов

Question

Привет, как вы можете видеть из моего примера кода. Я пытаюсь воспроизвести массив видео назад.

Что я пытаюсь сделать, это создать цикл for, который циклически увеличивает длину массива. В цикле for я вызываю функцию PlayAVideo, которая опустошает div, а затем повторно добавляет новые видео + теги источника. Моя цель - начать цикл for, воспроизвести первое видео в массиве, дождаться окончания видео, а затем продолжить цикл for со следующим элементом в массиве. В настоящее время происходит цикл цикла цикла через весь массив и воспроизводится только последнее видео. Я проверил readistate тега видео после того, как я добавлю новый, но они, кажется, никогда не доходят до 4 (им довольно уверен, что они остаются на 0), пока не загрузится последнее видео. Моя идея состояла в том, чтобы начать воспроизведение видео, а затем запустить цикл while, пока событие currentVideo.ended не изменит параметр, который установлен. Мой код никогда не появлялся в этом месте. Не совсем уверен, куда идти.

Javascript

$(document).ready(function(){ 
    $('.play-all').on("click", function(){ 
     var videoFileArray; 
     var pictureFileArray; 
     var rosterArray = LoadRosterFromButtons(); 
     rosterArray = FormatArray(rosterArray); 
     videoFileArray = AddMovieExtensions(rosterArray); 
     for(var i = 0; i < videoFileArray.length; i++){ 

      PlayAVideo(i, videoFileArray); 
     } 
     // PlayAllVideos(videoFileArray); 
     // AlertRosterArray(videoFileArray); 
    }); 
}) 

function PlayAVideo(position, fileArray){ 
    var videoEnded; 
    var currentVideo = document.getElementById('play-video'); //current video 
    videoTag = '<video id="play-video" width="588" height="318" controls autoplay><source src="{fileName}" type="video/mp4">Your browser does not support the video tag.</video>'; 
    videoTag = videoTag.replace('{fileName}', fileArray[position]); 
    $('.video-player').empty(); 
    $('.video-player').html(videoTag); 
    // $('.video-player').html(videoTag); 
    currentVideo = document.getElementById('play-video'); 
    if(currentVideo.readyState === 0){ 
     alert('0'); 
    } 
    if(currentVideo.readyState === 4){ 
     currentVideo.play(); 
     do{ 
     }while(videoEnded === false); 
     currentvideo.ended = function(){ 
      alert('ended'); 
     } 
     console.log(videoTag); 
    } 
} 

// function PlayAllVideos(fileArray){ 
    // var videoCurrentTime; 
    // var videoDuration; 
    // var currentArrayPosition = 0; 

    // do{ 
     // var videoTag = '<video id="play-video" width="588" height="318" controls autoplay><source src="{fileName}" type="video/mp4">Your browser does not support the video tag.</video>'; 
     // videoTag = videoTag.replace('{fileName}', fileArray[currentArrayPosition]); 
     // $('.video-player').empty(); 
     // $('.video-player').html(videoTag); 
     // var clip = document.getElementById('play-video'); //current video 
     // if(clip === undefined){ 
      // alert('clip is undefined'); 
     // } 
     // else{ 
      // console.log(clip.readyState); 
       // if(clip.readyState === 0){ 
        // alert('readyState === 0'); 
       // } 
      // clip.load(); 
      // clip.play(); 
     // } 
     // videoDuration = clip.duration; 
     // videoDuration = videoDuration.toFixed(1); 

     // do{ 
      // videoCurrentTime = videoTimeCounterUpdate(clip); 
     // }while(videoCurrentTime < videoDuration); 


     // if(videoCurrentTime === videoDuration){ 
      // currentArrayPosition += 1 
      // alert('end of video'); 
      // continue; 
     // } 

     // currentArrayPosition += 1 
    // }while(currentArrayPosition < fileArray.length); 

    // for(var i = 0; i < fileArray.length; i++){ 
     // var videoTag = '<video id="play-video" width="588" height="318" controls autoplay><source src="{fileName}" type="video/mp4">Your browser does not support the video tag.</video>'; 
     // videoTag = videoTag.replace('{fileName}', fileArray[i]); 
     // $('.video-player').empty(); 
     // $('.video-player').html(videoTag); 
     // var clip = document.getElementById('play-video'); //current video 
     // clip.play() 
     // // if(clip === undefined){ 
      // // alert('clip is undefined'); 
     // // } 
     // // else{ 
      // // clip.play(); 
     // // } 
     // videoDuration = clip.duration; 
     // videoDuration = videoDuration.toFixed(1); 

     // do{ 
      // videoCurrentTime = videoTimeCounterUpdate(clip); 
     // }while(videoCurrentTime < videoDuration); 


     // if(videoCurrentTime === videoDuration){ 
      // alert('end of video'); 
      // continue; 
     // } 
    // } 
// } 

function AddMovieExtensions(roster){ 
    var rosterArrayFormatted = []; 
    for(var i = 0; i < roster.length; i++){ 
     rosterArrayFormatted[i] = roster[i] + '.mov'; 
    } 
    return rosterArrayFormatted; 
} 


function LoadRosterFromButtons(){ 
//Loads current roster into memory from button labels 
    var currentC = "Willin Rosario"; 
    var current1B = "1b Man"; 
    var current2B = "current 2b"; 
    var currentSS = "current SS"; 
    var current3B = "current TB"; 
    var currentOF1 = "OF1"; 
    var currentOF2 = "OF2"; 
    var currentOF3 = "OF3"; 
    var currentU = "This is A U"; 
    var currentP1 = "P1"; 
    var currentP2 = "willinrosario"; 
    var rosterArray = [currentC, current1B, current2B, currentSS, current3B, currentOF1, currentOF2, currentOF3, currentU, currentP1, currentP2]; 
    return rosterArray; 
} 

function FormatArray(roster){ 
//remove spaces and lowercase all letters 
var rosterArrayFormatted = []; 
    for(var i = 0; i < roster.length; i++){ 
     rosterArrayFormatted[i] = roster[i].replace(/\s/g, '').toLowerCase(); 
    } 
return rosterArrayFormatted; 
} 

function AlertRosterArray(roster){ 
    for(var i = 0; i < roster.length; i++){ 
     alert(roster[i]); 
    } 
} 


// function PlayAllVideos(fileArray){ 
    // for(var i = 0; i < fileArray.length; i++){ 
     // do{ 

     // }while(); 
    // } 
// } 

function videoTimeCounterUpdate(clipObject){ 
    var clipTime = clipObject.currentTime; 
    clipTime = clipTime.toFixed(1); 
    var runTimeUpdate = setTimeout(videoTimeCounterUpdate, 100); //Round to .x digit  
} 

HTML

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 

     <!-- modernize older browsers --> 
     <script type="text/javascript" src="js/modernizr.js"></script> 

     <title>Starter File</title> 

     <!-- enable responsive web design --> 
     <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" /> 

     <!-- stylesheets --> 
     <link rel="stylesheet" type="text/css" href="css/reset.css" /> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <link media="only screen and (max-width: 980px)" href="css/tablet.css" type="text/css" rel="stylesheet"/> 
     <link media="only screen and (max-width: 700px)" href="css/mobile.css" type="text/css" rel="stylesheet"/> 
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'> 

     <!-- jQuery --> 
     <script type="text/javascript" src="js/jquery.js"></script> 
     <script type="text/javascript" src="js/jquery-ui.js"></script> 
     <script type="text/javascript" src="js/videoPlayerQeued.js"></script> 
    </head> 

    <body> 
     <div class="top-banner"> 
      <div class="logo-container"> 
       <img src="images/fantasytv-logo.png"/> 
       <div>your team, on your time</div> 
      </div> 

      <div class="provider-container-interface"> 
       <img src="images/yahoo-signed-in.png"/> 
      </div> 

     </div><!--end of top banner --> 

     <div class="interface-container"> 
      <ul class="menu"> 
       <li>MY LEAGUES</li> 
       <li>SETTINGS</li> 
       <li>SIGN OUT</li> 
      </ul><!--end menu--> 
      <div class="fix"></div> 

      <div class="date-shift-banner"> 
       <div class="left-arrow"> 
        <img src="images/left-arrow.png"/> 
       </div> 

       <div class="date"> 
        June 23, 2013 
       </div> 

       <div class="right-arrow"> 
        <img src="images/right-arrow.png"/> 
       </div> 
      </div><!--end date banner--> 

      <div class="stats-profile-container"> 
       <div class="stats-container"> 
        <div class="stats-title-container"> 
         <div><div class="padding-stat-title-offense">OFFENSE</div></div> 
         <div><div class="padding-stat-title-pitching">PITCHING</div></div> 
        </div> 
        <div class="fix"></div> 

        <table class="offense"> 

         <tr> 
          <td></td> 
          <td>R</td> 
          <td>AVG</td> 
          <td>H</td> 
          <td>HR</td> 
          <td>SB</td> 
          <td>RBI</td> 
          <td></td> 
         </tr> 

         <tr> 
          <td></td> 
          <td>0</td> 
          <td>.000</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td></td> 
         </tr> 
        </table><!--end stats table--> 

        <table class="pitching"> 
         <tr> 
          <td></td> 
          <td>W</td> 
          <td>L</td> 
          <td>H</td> 
          <td>K</td> 
          <td>WHIP</td> 
          <td>ERA</td> 
          <td></td> 
         </tr> 

         <tr> 
          <td></td> 
          <td>0</td> 
          <td>.000</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td></td> 
         </tr> 
        </table><!--end stats table--> 

       </div><!--end stats container--> 

       <div class="player-profile-container"> 
        <img class="player-picture" src=""/> 

        <div class="player-name-team-container"> 
         <div class="player-name"></div> 
         <div class="player-team"></div> 
        </div><!-- end player name team container --> 
       </div><!--end player profile container--> 
       <div class="fix"></div> 
      </div><!--end stats and profile container--> 

      <div class="video-roster-container"> 
       <div class="video-container"> 
        <div class="video-container-padding"> 
         <div class="fantasy-team">TEAM: <span>YANKEEFAN</span></div> 
         <div class="video-player"> 
          <video id="play-video" width="588" height="318" controls autobuffer> 
             Your browser does not support the video tag. 
          </video> <!--end video container --> 

         </div><!--end video player--> 
        </div><!--end video container padding--> 
       </div><!--end video container--> 

       <div class="roster-container"> 
       <div class="play-all-container"> 
       <div class="play-all"><img src="images/play-all-arrow.png"/></div><div class="watch-all-players">Watch All Players</div> 
       <div class="fix"></div> 
       </div> 

        <ul class="player-video-buttons"> 
         <li id="test"><span>C</span><span>Willin Rosario</span><span class="team">Colorado Rockies</span></li> 
         <li><span>1B</span><span>Chris Davis</span><span class="team">Baltimore Orioles</span></li> 
         <li><span>2B</span><span>Ian Kinsler</span><span class="team">Detroit Tigers</span></li> 
         <li><span>SS</span><span>Derek Jeter</span><span class="team">New York Yankees</span></li> 
         <li><span>3B</span><span>Evan Longoria</span><span class="team">Tampa Bay Rays</span></li> 
         <li><span>OF</span><span>Mike Trout</span><span class="team">Los Angeles Angels</span></li> 
         <li><span>OF</span><span>Josh Hamilton</span><span class="team">Los Angeles Angels</span></li> 
         <li><span>OF</span><span>Michael Cuddyer</span><span class="team">Colorado Rockies</span></li> 
         <li><span>U</span><span>David Ortiz</span><span class="team">Boston Red Sox</span></li> 
         <li><span>P</span><span>Clayton Kershaw</span><span class="team">Los Angeles Dodgers</span></li> 
         <li><span>P</span><span>Matt Harvey</span><span class="team">New York Mets</span></li> 
        </ul> 

       </div><!--end roster container--> 
       <div class="fix"></div> 
      </div><!-- end video roster container--> 
     </div><!--end interface container--> 
    </body> 
</html> 

Answer 1

Пока не тиражирование всей своей логики, это видео будет принимать массив видео (определенное в первом script блоке) и пошагово с использованием события ended для перехода к следующему элементу массива.

<head> 
.... 
<script> 
    var videos = new Array("BigBuck.m4v","Video.mp4","BigBuck.m4v","Video2.mp4"); 
    var currentVideo = 0; 

function nextVideo() { 
    // get the element 
    videoPlayer = document.getElementById("play-video") 
    // remove the event listener, if there is one 
    videoPlayer.removeEventListener('ended',nextVideo,false); 

    // update the source with the currentVideo from the videos array 
    videoPlayer.src = videos[currentVideo]; 
    // play the video 
    videoPlayer.play() 

    // increment the currentVideo, looping at the end of the array 
    currentVideo = (currentVideo + 1) % videos.length 

    // add an event listener so when the video ends it will call the nextVideo function again 
    videoPlayer.addEventListener('ended', nextVideo,false); 
} 
</script> 
</head> 
<body> 
... 
<div class="video-player"> 
    <video id="play-video" width="588" height="318" controls autobuffer muted> 
    Your browser does not support the video tag. 
    </video> <!--end video container --> 
</div> 

<script> 
    // call the video player 
    nextVideo() 
</script>