Question

我要做的是自动按顺序播放4个视频。当一个结束时，下一个开始，直到最后一个视频。到目前为止我所拥有的除了Safari之外的所有浏览器都能正常工作。在safari中，它加载第一个视频（00.mp4），成功切换到第二个视频（01.mp4），就是这样，不再是。这就是我得到的东西，我有点想办法解决这些问题，因为如果我的代码很糟糕且效率低下，我会很抱歉。

这是我的javascript：

function load() {
    var video = document.getElementsByTagName('video')[0];
       if (video.canPlayType("video/ogg")) {
            video.src='00.ogg';
            video.addEventListener('ended', function() {
            video.src='01.ogg';
                video.load();
                video.removeEventListener('ended', arguments.callee, false);
                video.addEventListener('ended', function() {
                    video.removeEventListener('ended', arguments.callee, false);
                    video.src='02.ogg';
                    video.load();
                    video.addEventListener('ended', function() {
                        video.removeEventListener('ended', arguments.callee, false);
                        video.src='08.ogg';
                        video.load();
                    }, false);
                }, false);
            }, false);
       }
       else if (video.canPlayType("video/mp4")) {
           video.src='00.mp4';
           video.addEventListener('ended', function() {
                video.src='01.mp4';
                video.load();
                video.addEventListener('ended', function() {
                    video.src='02.mp4';
                    video.load();
                    video.addEventListener('ended', function() {
                        video.src='08.mp4';
                        video.load();
                    }, false);
                }, false);
            }, false);
       }
       else {
           window.alert("Blah blah placeholder blah");
       }
}

这是相关的HTML：

<body onLoad="load()">
<video id="vid" autoplay width="416" height="240" src=""></video>

对于我认为糟糕的编码的任何更正也表示赞赏，谢谢。

Answer 1

同样的问题。我注意到如果您使用控件跳转到视频中的其他位置，Safari会正确加载下一个视频



<video autoplay=true width=100% height=100% controls="controls" id=theVideo onended="end(this)" style=position:absolute;top:0px;left:0px >
<source src="Opening.m4v" type="video/mp4" />
Your browser does not support the video tag.
</video>

<script>

function end(inVideoEnded)
{
 var video = document.getElementById("theVideo");
 if (playstate == 0) {
   video.src = "Choice1-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=1;
 } else if (playstate == 1) {
   video.src = "Choice1_A-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=2;
 } else if (playstate == 2) {
   video.src = "Choice1_B-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=3;
 } else if (playstate == 3) {
   video.src = "Choice1_C-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=4;
 }
 video.load();
 video.play();
 video.onended = function(e) {
  end(e);
 }
}

</script>
</code>


I added the setTimeout line.  This jumps it back to start after 100 milliseconds and that was enough time for my Safari to consider it enough to play a second video.  50 milliseconds was too short.  Try adding a line like that right after your video.load

<video autoplay=true width=100% height=100% controls="controls" id=theVideo onended="end(this)" style=position:absolute;top:0px;left:0px >
<source src="Opening.m4v" type="video/mp4" />
Your browser does not support the video tag.
</video>

<script>

function end(inVideoEnded)
{
 var video = document.getElementById("theVideo");
 if (playstate == 0) {
   video.src = "Choice1-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=1;
 } else if (playstate == 1) {
   video.src = "Choice1_A-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=2;
 } else if (playstate == 2) {
   video.src = "Choice1_B-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=3;
 } else if (playstate == 3) {
   video.src = "Choice1_C-H.264 for iPod video and iPhone 640x480.m4v";
   playstate=4;
 }
 video.load();
 video.play();
 video.onended = function(e) {
  end(e);
 }
}

</script>
</code>

HTML5视频 - Safari不播放第二个视频

1 个答案: