0

我处于间歇性错误的令人沮丧的境地。运行时，PHP 指定要显示的视频和 3 张图片。视频在页面加载800ms后开始播放，图片在视频结束后立即显示，此时用户按下一个键（对应图片的位置），按键触发一个测量反应时间的功能，存储他们选择的图片，并加载下一页，然后所有这些都再次发生，并带有新的视频和新的图片。

这一切都很好......有时。

在其他时候，我会在我期望看到视频的地方看到一个空白屏幕。有时它会立即发生，有时在成功加载多达 15 或 20 次后发生，或者介于两者之间。我正在运行 Chrome 27.0.1453.93，并使用 Chrome 的内置 javascript 控制台跟踪错误。即使视频无法加载，也不会出现 javascript 错误（使用 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">）。

为了查明哪里出了问题，我添加了一堆事件侦听器并使用匿名函数将一些输出传递到 js 控制台日志文件，以查看视频事件的哪些阶段正在发生或未发生。至少，这是一个可靠的模式：每次视频加载失败时，都发生了 loadstart，但 durationchange 没有发生。我只是无法弄清楚是什么问题阻止了它继续！

我期待这里的回复，无论是答案，还是只是其他人证实的经历，所以我不会感到如此疯狂！我将在此处包含两个最相关的 javascript 函数，但我不确定它们会做多少好事。

<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>
4

1 回答 1

1

哦，天哪。我很高兴没有其他人浪费时间试图回答这个问题。如果您想知道，会导致视频在 loadstart 和 durationchange 之间停止加载的原因是该视频不存在！（我的一个视频的文件名有错字，而且由于视频的顺序是随机的，我无法判断它在尝试加载相同的视频时总是失败。）

固定的。

于 2013-05-31T05:00:43.797 回答