问题
Hello as you can see from my sample code i am trying to play an array of videos back to back.
What i attempt to do is create a for loop which cycles for the length of the array. Within the for loop i call a PlayAVideo function that empties a div and then reenters a new video + source tags. My objective is to begin the for loop, play the first video in the array, wait for end of video, then continue with for loop with next element in the array. What currently happens is the for loop cycles through the entire array and only plays the last video. I have checked the readystate of the video tag after i add a new one, but they dont appear to ever get to 4(im pretty sure they stay at 0) until the last video is loaded. My idea was to begin playing the video and then start a do while loop until the currentVideo.ended event changes the parameter that is checked. My code doesnt ever appear to reach this spot. Not really sure where to go.
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>
回答1:
While not replicating all your logic, this video will take the array of videos (defined in the first script block) and step through them using the ended event to advance to the next array item.
<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>
来源：https://stackoverflow.com/questions/21471116/html5-video-waiting-for-video-end-waiting-for-video-ready