HTML5視頻-Safari無法播放第二個視頻

Question

我想要做的是自動按順序播放4個視頻。 當一個結束時，下一個開始，直到最后一個視頻。 到目前為止，我在除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> 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.load(); video.play(); setTimeout("document.getElementById('theVideo').currentTime = 0;",100); video.onended = function(e) { end(e); } }

HTML5視頻-Safari無法播放第二個視頻

問題描述

1 個解決方案

解決方案1
1 2012-05-30 01:44:27

HTML5視頻-Safari無法播放第二個視頻

問題描述

1 個解決方案

解決方案1 1 2012-05-30 01:44:27

解決方案1
1 2012-05-30 01:44:27