Спосіб 1. Відеофайл
У цьому випадку сам відеофайл розміщується в одній з папок самого сайту з назвою, наприклад, video аналогічно до того, як використовувані в подальшому на сайті зображення збираються в окрему папку, а для безпосереднього вставлення цього файлу на веб-сторінку використовується тег <video>.
<video src="video/movie1.mp4">
Відеофайл, вставлений таким чином, неможливо переглянути, оскільки він не міститиме елементів керування (перемотка, гучність тощо).
Для того, щоб ці елементи з'явилися, необхідно дописати атрибут controls:
<video src="video/movie1.mp4" controls>
Отепер уже інша справа.
Спосіб 2: Відеовставка
Суть у тому, що відео, яке буде використане на сайті, завантажується на один з відеохостингів, наприклад, на YouTube, а потім з нього отримується код цього відео і саме цей код вставляється на веб-сторінку.
Відкриваємо потрібне відео і тиснемо на кнопку Поділитися:
...потім на кнопку Вставити:
І ось він, потрібний для вставлення код:
Залишилось скопійований код вставити в потрібне місце веб-сторінки, за потреби, вирівнявши його по центру тегами <center>:
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/azyltM_T9tc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
Тепер уже все виглядає інакше:
Цей відеофайл уже не займає місце на вашому хостингу і містить уже готові елементи керування.
Якщо вам потрібно, щоб на сторінці відтворювався не увесь відеоролик, а тільки його фрагмент, то цього легко досягнути підкоригувавши вставлений вами код. Для цього вам потрібно запам'ятати час початку і час завершення потрібного вам фрагменту і перевести його у секунди. Наприклад, якщо потрібний вам фрагмент починається на 1 хвилині 16 секунд, а закінчується на 2 хвилині 21 секунді, тоді час початку вашого відео дорівнює 1*60+16=76, а час завершення - 2*60+21=141. А тепер видозмінимо код вставлення, узятий з YouTube, дописавши в ньому час початку й час завершення відтворення відео (доданий код виділено):
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/azyltM_T9tc?start=76&end=141" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></center>
Ось як відтворюватиметься тепер вставлений раніше відеоролик з внесеними в нього змінами: