4

HTML5 ビデオが再生されます。終了すると、以下のスクリプトが呼び出され、次のビデオが次の行に追加されて再生が開始されます。これをループにして、2 番目のビデオの再生が終了すると、3 番目のビデオが追加されるようにするにはどうすればよいですか?

<div>
    <video id="video0" autoplay>
        <source src="video0.mp4" />
    </video>
</div>

.

var i=0
$('video'+i).on("ended", function() {
    i++;
    $(this).parent().append('<br /><video id="video'
        + i
        + '" autoplay><source src="video'
        + i
        + '.mp4" /></video>');
    };
4

4 に答える 4

2

更新された回答:

あなたの質問を読み直して変更を確認した後、あなたが求めていることを行うべきいくつかのロジックがあります...

var i = 0;
var numVideos = 5;
var addVideo = function() {
    i++;
    var nextVideo=$('<video id="video'
        + i
        + '" autoplay><source src="video'
        + i
        + '.mp4" /></video>');
    nextVideo.on('ended', addVideo);
    $(this).after('<br />').after(nextVideo);
};
$('video0').on('ended', addVideo);

元の回答:

タグ にloop属性を追加するのはどうですか? W3 リソースvideo

于 2012-06-04T19:24:43.837 に答える
1

HTML 5 ビデオは、'loop' 属性を使用してループできます。

loop="loop"

ループをサポートしていないブラウザーは、次の方法でサポートできます。

$("#video").bind('ended', function(){ 
  this.play();
});

参照

于 2012-06-04T19:25:18.170 に答える
0

jQueryに役立つので使ってみませんか？

Head タグ内: 

    <script type="text/javascript">
            $(document).ready(function () {
                v_count = 1;
                $("#video").bind('ended', function () {
                    v_count++;
                    if (v_count == 4)
                        v_count = 1;
                    $("#sovideo").attr("src", "ModelVideo/1/video" + v_count + ".mp4");
                    $("#video").load();
                    this.play();                            
            });   
        </script>

本文タグ: 

        <div style="width: 30%;"> 
            <video id="video" width="100%" controls>
            <source id="sovideo" src="ModelVideo/1/video1.mp4" />
        </div>
于 2014-01-27T17:54:02.400 に答える