<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>关于html5 video的连续播放</title>
</head>

<body>
播放完后,重新播放
    } } </script>

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连续播放</title>
    <style>
        video{
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
        <video  id="myvideo" width="100%" height="auto" controls="controls" >
            你的浏览器不支持HTML5播放此视频 
            <source src="videos/demo.mp4" type='video/mp4' />
        </video>
</body>
</html>
<script src="https://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        video.play();
    });
    var vList = ['videos/demo2.mp4', 'videos/demo3.mp4','videos/demo.mp4']; // 初始化播放列表
    var vLen = vList.length;
    var curr = 0;
    var video = document.getElementById("myvideo");
    video.addEventListener('ended', function(){
        alert("已播放完成,继续下一个视频")
        play();
    });
    function play() {
        video.src = vList[curr];
        video.load();
        video.play();
        curr++;
        if(curr >= vLen){
            curr = 0; //重新循环播放
        }

    }
</script>

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-07-13
  • 2021-07-02
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-22
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-08-25
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案