0
我正在連續播放視頻的集合。我的策略是創建一個包含每個文件名的數組，創建一個錄像帶，該錄像帶在do while循環中定義了{filename}參數，同時用數組元素替換視頻標籤。我遇到的問題是，在調用clip.play（）函數時視頻不會播放？我的第二個問題是，爲了確定是否移動到下一個視頻，我將clip.currentTime與clip.duration進行了比較，但是對於某些季節，我正在爲clip.duration獲取NAN？HTML5視頻未播放，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
}
您是否嘗試過使用.readyState（）來了解是否所有視頻加載都很好？ –
從im發現它看起來像.readystate是html5視頻標記的屬性。我沒有檢查過，因爲我沒有意識到這一點，但當我回家時我會這樣做。 – hfrog713
my readystate = 0 – hfrog713