MODULE 11

Video Playlist

Working local-file playback. Add your own licensed videos; no sample footage is bundled.

Choose one or more video files

Ready: Motion study · 8-second silent demo. Use the player controls to play.

HTML source & reuse instructions

Load Bootstrap, Versa CSS/JS, and your custom layer. Give every copied ID a unique value and update its matching references.


<div data-bundled-video="" data-lab-video="">
<label class="form-label">
        Choose one or more video files
        <input accept="video/*" class="form-control" multiple="" type="file"/>
</label>
<div class="lab-video-layout">
<video aria-label="Selected video player" controls="" poster="/assets/images/versa-project.svg" preload="metadata" src="/assets/images/versa-video.svg">
</video>
<div>
<p data-video-status="" role="status">Ready: Motion study · 8-second silent demo. Use the player controls to play.</p>
<div class="d-grid gap-2" data-video-list="">
</div>
</div>
</div>
<button class="btn btn-outline-dark mt-3" data-reset-demo="" type="button">Restore demo video</button></div>