1 
<!doctype html>
<html>
<head>
    <title>Sequential Movies</title>
    <script type="text/javascript">
        // listener function changes src
        function myNewSrc() {
            var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = "2.m4v";
            myVideo.load();
            myVideo.play();
        myVideo.addEventListener('ended', myAddListener, false);
        }
        // add a listener function to the ended event

        function myAddListener(){
            var myVideo = document.getElementsByTagName('video')[0];
        myVideo.src = "1.m4v";
            myVideo.load();
            myVideo.play();
            myVideo.addEventListener('ended', myNewSrc, false);
        }
    </script>
</head>
<body onload="myAddListener()">
    <video controls
           src="1.m4v">
    </video>
</body>
</html>

問題は、video1 は video2 に切り替えることができるが、video2 は video1 に切り替えることができないことです。1 > 2 > 1 > 2 > 1 > 2 > 1 をループするスクリプトを作成するにはどうすればよいですか? 3 つ以上のビデオ ソースを切り替えることはできますか? 一番下のリンクが何について話しているのかわかりませんが、役に立ちそうです。

「終了」で配列内の次のビデオを再生します

4

2 に答える 2

0

実際には、同じビデオオブジェクトに2つのリスナーを追加します。次のようなものを使用できます。

<!doctype html>
<html>
<head>
    <title>Sequential Movies</title>
    <script type="text/javascript">
        var videoSources = ["SSR-Styles.mp4","Gauges-radial.mp4"]
        var currentIndex = 0;

        function setFirstVideo()
    {
        var myVideo = document.getElementsByTagName('video')[0];
            myVideo.src = videoSources[currentIndex];
    }

    function videoEnded(){
            var myVideo = document.getElementsByTagName('video')[0];
            currentIndex = (currentIndex+1) % videoSources.length;
            myVideo.src = videoSources[currentIndex];
            myVideo.load();
            myVideo.play();
        }    
</script>
</head>
<body onload="setFirstVideo()">
    <video controls  onended="videoEnded()"
           src="">
    </video>
</body>
</html>
于 2012-12-04T09:17:04.140 に答える
0

これにより、次の 2 つのビデオが自動的にループされます。

var id = 1; // Current video number
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener("ended", myNewSrc)

function myNewSrc() {
    myVideo.src = id+".m4v";
    myVideo.load();
    myVideo.play();
    id++ % 2 + 1; // Set ID to the other number
}

あなたのhtmlで：

<body onload="myNewSrc()">
于 2012-12-04T09:20:54.680 に答える