您好，从我的示例代码中我可以看到我正在尝试连续播放一系列视频。
我尝试做的是创建一个for循环，循环数组的长度。在for循环中，我调用一个PlayAVideo函数来清空div，然后重新输入一个新的视频+源标签。我的目标是开始for循环，播放数组中的第一个视频，等待视频结束，然后继续使用数组中下一个元素的for循环。目前发生的是for循环遍历整个阵列并且只播放最后一个视频。我添加了一个新视频标签后检查了视频标签的readystate，但它们似乎没有达到4（我很确定它们保持在0），直到最后一个视频加载。我的想法是开始播放视频，然后启动do 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>
答案 0 :(得分：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>