hfrog713
Reputation: 410
HTML5 Video not playing, NAN duration
I am working to play a collection of videos consecutively. My strategy to do this was to have an array containing each filename, create a videotag which has the {filename} parameter defined within a do while loop, the do while replaces the videotag with the array element. The issue i am having is that the video will not play when the clip.play() function is called? My second issue is that in order to determine whether or not to move to the next video i compare clip.currentTime to clip.duration but for some season i am getting NAN for clip.duration?
HTML FILE
<!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 File
$(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
}
Upvotes: 0
Views: 1895
Answers (2)
Ahmad Awais
Reputation: 37120
I think all that you need is to add .get(0) before any video related functions. E.g. .get(0).play().
The issue is in WebKit browsers; the video metadata is loaded after the video so is not available when the JS runs. You need to query the readyState attribute; this has a series of values from 0 to 4, letting you know what state the video is in; when the metadata has loaded you'll get a value of 1.
There's more information about media element attributes on developer.mozilla.org.
Upvotes: 0
brianchirls
Reputation: 7853
It looks like you're loading quicktime video files. Try using .mp4 files, and you'll need a .webm version as well to play in Firefox. Rather than set a src attribute on the video tag, you'll want to make two "source" tags. See the example here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#Examples
Also, once you get it playing, it's easiest to detect the end of the video by listening for the 'ended' event.
Upvotes: 1
Related Questions
- HTML video stops playing after 1 minute and 50 seconds
- Why am I getting NaN as video duration while using videojs
- HTML5 video duration infinity while readyState = 4
- Trying to get full video duration but returning as Nan
- Video Playback Time not displaying
- video not loading in html5
- Incorrect Video Duration
- HTML5 video ERR_CONTENT_LENGTH_MISMATCH
- HTML5 Video Duration
- Unable to play video in HTML5