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

时间:2012-06-04 19:22:30

标签: jquery html5-video

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

4 个答案:

答案 0 :(得分: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属性添加到video标记中? W3 Resource

答案 1 :(得分:1)

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

loop="loop"

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

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

Reference

答案 2 :(得分:1)

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

在标题中:

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

答案 3 :(得分:0)

尝试使用它来帮助你获取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>