HTML5 视频 - Safari 无法播放第二个视频答案

【问题标题】：HTML5 video - Safari doesn't play past second videoHTML5 视频 - Safari 无法播放第二个视频
【发布时间】：2012-01-19 03:24:01
【问题描述】：

我想要做的是让 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>

感谢任何对我认为糟糕的编码的更正，谢谢。

【问题讨论】：

标签： javascript html video safari

【解决方案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>

我添加了 setTimeout 行。这会在 100 毫秒后跳回开始，这足以让我的 Safari 认为它足以播放第二个视频。 50 毫秒太短了。尝试在你的 video.load 之后添加这样的一行

 video.load();
  视频.play();

  setTimeout("document.getElementById('theVideo').currentTime = 0;",100);

  video.onended = 功能（e）{
    结束（e）；
  }
}

【讨论】：