Question

播放html5视频。完成后，将调用下面的脚本，该脚本会显示下一个视频，并将其添加到下一行并开始播放。如何将其转换为循环，以便在第二个视频完成播放后，它会附加第三个视频，依此类推？

<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>');
    };

Answer 1

更新答案：

重新阅读你的问题并看到变化后，这里有一些逻辑可以做你要求的......

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属性添加到video标记中？ W3 Resource

Answer 2

HTML 5视频可以使用'loop'属性循环播放：

loop="loop"

可以通过以下方式支持没有循环支持的浏览器：

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

Reference

Answer 3

尝试使用它可以帮到你吗？

在标题中：

 <script type="text/javascript" language="javascript"> 
            video_count = 1; 
            function run() { 
                video_count++; 
                var videoPlayer = document.getElementById("homevideo"); 
                if (video_count == 4) 
                    video_count = 1; 
                var nextVideo = "ModelVideo/1/video" + video_count + ".mp4"; 
                videoPlayer.src = nextVideo; 
                videoPlayer.load(); 
                videoPlayer.play();        
            }; 
        </script>

在Body标签中

    <div style="width: 30%;"> 
            <video id="homevideo" width="100%" controls autoplay onended="run()"> 
            <source id="ss" src="ModelVideo/1/video1.mp4" type='video/mp4'/></video> 
        </div>

Answer 4

尝试使用它来帮助你获取jQuery吗？

在标题中：

    <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>

在Body标签中

        <div style="width: 30%;"> 
            <video id="video" width="100%" controls>
            <source id="sovideo" src="ModelVideo/1/video1.mp4" />
        </div>

在“已结束”事件中循环播放HTML5视频

4 个答案: