Атрибут loop тега <video> — зациклити відтворення відео

HTML

<p class="head">Три написання, один результат</p>
<pre class="code">&lt;video src="clip.mp4" loop&gt;&lt;/video&gt;          — зациклено
&lt;video src="clip.mp4" loop="false"&gt;&lt;/video&gt;  — теж зациклено
&lt;video src="clip.mp4"&gt;&lt;/video&gt;               — не зациклено</pre>

<p class="head">Як це виглядає в часі</p>

<p class="cap">Із loop: доходить до кінця й починає спочатку, події «кінець» не буде ніколи</p>
<div class="track"><div class="dot inf"></div></div>

<p class="cap">Без loop: доходить до кінця, спиняється й повідомляє «кінець»</p>
<div class="track"><div class="dot once"></div><span class="end">кінець</span></div>

<p class="note">Кружечок — місце відтворення. Ліворуч початок ролика, праворуч — кінець.</p>

CSS

.head {
    margin: 22px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.code {
    max-width: 620px;
    margin: 0;
    padding: 10px 12px;
    overflow-x: auto;
    border-left: 4px solid #2f6fd0;
    background: #f6f9ff;
    font: 14px/1.6 ui-monospace, monospace;
}

.cap {
    margin: 18px 0 6px;
    max-width: 620px;
    color: #5a6472;
}

.track {
    position: relative;
    width: 420px;
    max-width: 100%;
    height: 26px;
    border: 2px solid #b9c6d8;
    border-radius: 13px;
    background: #f6f9ff;
}

.dot {
    position: absolute;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2f6fd0;
}

.inf {
    animation: run 3s linear infinite;
}

.once {
    background: #72b043;
    animation: run 3s linear 1 forwards;
}

.end {
    position: absolute;
    top: 2px;
    right: -74px;
    color: #2c7a3f;
    font-size: .85em;
    font-weight: 600;
}

@keyframes run {
    from {
        left: 3px;
    }

    to {
        left: calc(100% - 19px);
    }
}

HTML

<div class="block1" >
  <p> З використання атрибуту <code> autoplay</code> </p>
 
  <video controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E" autoplay="autoplay" loop>
</div>

<div class="block1" >
  <p> Без використання атрибуту <code> autoplay</code> </p>
 <video controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E" autoplay >
</div>

CSS

.block1{
  float:left;
  padding:10px;
  border:2px solid black;
  
}