视频1结束后自动播放下一个视频

Question

我自己不能写html。但是，如果我看一下代码，我大多数都会理解该函数是什么。因此，我们有一个自动播放功能，可以在访问网站作为背景时播放.mp4视频。下面的代码有效，并且视频结束时视频会循环播放。但是如何在3个不同的视频之间旋转？

我尝试添加这样的不同来源（在原始来源下）：

<div id="hero-section" class="medium-margin">
    <div class="row hero-unit">
        <div class="hero-overlay"></div>
        <video autoplay loop muted poster="images/poster.jpg" id="bgvid" class="img-fluid">
            <source src="images/Avalo.mp4"type="video/mp4">
            <source src="images/city.mp4"type="video/mp4">
            <source src="images/dragon.mp4"type="video/mp4">
      </video>
        </div>
    </div>
</div>

但是，这只会播放并循环播放第一个。

<div id="hero-section" class="medium-margin">
    <div class="row hero-unit">
        <div class="hero-overlay"></div>
        <video autoplay loop muted poster="images/poster.jpg" id="bgvid" class="img-fluid">
            <source src="images/Avalo.mp4"type="video/mp4">
        </video>
        </div>
    </div>
</div>