Вернуться ко всем статьям
Как вставить видео в HTML
Существует три основных типа вставки видео на сайт: вставка с внешних ресурсов (видеохостингов), с помощью встраиваемого плеера, при помощи тегов HTML5.
Для начала рассмотрим как вставить видео в HTML на примере вставки ролика с YouTube:
- Загрузите видео и перейдите на его страницу, либо откройте страницу с ранее загруженным видео.
- Под видео нажмите кнопку «поделиться».
- В появившемся окне выберите пункт «встроить».
- Скопируйте появившийся код и вставьте его в необходимое место кода вашего сайта.
Код для вставки будет иметь следующий вид:
<iframe width="500" height="300" src="https://www.youtube.com/embed/адрес_ролика" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Вставка происходит при помощи тега iframe, позволяющего контенту внутри заданной области отображаться вне зависимости от окружающей страницы. Атрибуты width и height задают размеры отображаемого видео и указывают ширину и высоту в пикселях, которые вы можете изменить на необходимые вам. Src указывает на расположение видео.
Для вставки видео вторым методом прежде всего необходимо встроить плеер на ваш сайт. Рассмотрим данный метод на примере FlowPlayer:
1. Скачайте файлы плеера и загрузите их в папку на хостинге с вашим сайтом.
2. В теге head после таблицы стилей подключите javascript:
<script type="text/javascript" src="Папка_с_плеером/файл_скрипта.js"></script>
3. Вставьте в тело страницы плеер с видео:
<a href="папка_с_видео/имя_видео.mp4" style="display: block; width: 500px; height: 300px;" id="player"></a>
<script type="text/javascript">
flowplayer("player", "http://адрес_сайта/Папка_с_плеером/файл_плеера.swf");
</script>
Теперь перейдём к вставке видео с вашего хостинга при помощи тегов HTML5.
Для этого применяется тег video, в котором можно предоставлять видео сразу нескольких форматов, на случай, если основной не поддерживается браузером пользователя.
<video controls>
<source src="папка_с_видео/имя_файла.mp4" type="video/mp4">
<source src="папка_с_видео/имя_файла.ogv" type="video/ogg">
</video>
Атрибут controls включает панель управления просмотром видео. Также можно применить и другие атрибуты, позволяющие менять размер, устанавливать превью, зацикливать воспроизведение и начинать автоматическое воспроизведение при загрузке страницы.
Выбирайте удобный для вас способ и добавляйте видео на свой сайт!
