我正在努力连续播放视频集。我这样做的策略是让一个数组包含每个文件名，创建一个录像带，其中有一个do while循环中定义的{filename}参数，do while用数组元素替换录像带。我遇到的问题是，调用clip.play（）函数时视频无法播放？我的第二个问题是，为了确定是否要移动到下一个视频，我将clip.currentTime与clip.duration进行比较，但是对于某些季节，我正在为clip.duration获取NAN？
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>
<source src="cuddyer.mov" type="video/mp4">
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>
Javascript文件
$(document).ready(function(){
$('.play-all').on("click", function(){
var videoFileArray;
var pictureFileArray;
var rosterArray = LoadRosterFromButtons();
rosterArray = FormatArray(rosterArray);
videoFileArray = AddMovieExtensions(rosterArray);
// PlayAllVideos(videoFileArray);
var x = PlayAllVideos(videoFileArray);
// AlertRosterArray(videoFileArray);
});
})
// function PlayFirstVideo(fileArray){
// 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[0]);
// $('.video-player').empty();
// $('.video-player').html(videoTag);
// return 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{
clip.addEventListener('loadedmetadata', function(){
console.log(clip.duration);
});
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 = "P2";
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
}
答案 0 :(得分：1)
看起来你正在加载quicktime视频文件。尝试使用.mp4文件，你也需要一个.webm版本才能在Firefox中玩。您需要制作两个“源”标记，而不是在视频标记上设置src属性。看这里的例子：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#Examples
此外，一旦你开始播放，最容易通过收听'已结束'事件来检测视频的结尾。
答案 1 :(得分：0)
我认为您需要的是在任何视频相关功能之前添加.get(0)。例如。 .get(0).play()。
问题出在WebKit浏览器中;视频元数据在视频之后加载，因此在JS运行时不可用。您需要查询readyState属性;它有一系列从0到4的值，让你知道视频的状态;当元数据加载后，您将获得值1。
有关developer.mozilla.org上媒体元素属性的更多信息。