I'm in the frustrating situation of having an intermittent error. When functional, PHP specifies a video and 3 pictures to be displayed. The video begins playing 800ms after the page loads, and the pictures are displayed immediately upon the end of the video, at which point a user presses a key (corresponding to the location of the picture) and the keypress triggers a function that measures reaction time, stores which picture they selected, and loads the next page, whereupon all of this happens again with a new video and new pictures.
That all works just fine... sometimes.
At other times, I get a blank screen where I was expecting to see the video. Sometimes it happens right away, sometimes after as many as 15 or 20 successful loads, or anywhere in between. I'm running Chrome 27.0.1453.93, and tracking errors using Chrome's built-in javascript console. Even when the video fails to load, there are no javascript errors (with DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">).
To pinpoint where things are breaking down, I've added a bunch of event listeners and used anonymous functions to pass some output to the js console log file to see which stages of the video event are or aren't happening. Here, at least, is a reliable pattern: every time the video fails to load, loadstart has happened, but durationchange has not. I just can't figure out what the problem is that prevents it from continuing!
I look forward to the responses here, whether they're answers or even just other people corroborating the experience so I don't feel so crazy! I'll include the two most relevant javascript functions here, but I'm not sure how much good they'll do.
<script>
function playVid(newSource){
console.log("playVid worked");
setTimeout(function(){//tells it to wait for some amount of time (below) before doing the next part
console.log("setTimeout was called");
document.getElementById("StimClip").innerHTML="<video id='video1'> <source src='" + newSource + "' type='video/mp4'>Something went wrong. Sorry 'bout that!</video>"; //replace blank.jpg with the appropriate video
console.log("the inner html was set");
myAddListener();
console.log("myAddListener was called");
var myVid=document.getElementById("StimClip"); //create a new variable to identify the video
console.log("the myVid variable was created");
video1.play(); //play the video
} //
,800); //finishes the setTimeout call by specifying how many msec to wait before executing.
}
function myAddListener(){
console.log("myAddListener worked");
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('waiting', function(){console.log("I'm WAITING...!")}, false);
myVideo.addEventListener('suspend', function(){console.log("Nice suspenders.")}, false);
myVideo.addEventListener('abort', function(){console.log("video was aborted")}, false);
myVideo.addEventListener('error', function(){console.log("there was an error")}, false);
myVideo.addEventListener('loadstart', function(){console.log("load start worked")}, false);
myVideo.addEventListener('durationchange', function(){console.log("the duration changed")}, false);
myVideo.addEventListener('loadedmetadata', function(){console.log("metadata was loaded")}, false);
myVideo.addEventListener('loadeddata', function(){console.log("data was loaded")}, false);
myVideo.addEventListener('progress', function(){console.log("progress...? ")}, false);
myVideo.addEventListener('canplay', function(){console.log("video can play")}, false);
myVideo.addEventListener('canplaythrough', function(){console.log("can play through worked")}, false);
myVideo.addEventListener('playing', function(){console.log("the video started playing")}, false);
myVideo.addEventListener('ended', ShowPics, false);
}
</script>
