Как вставить видео на сайт в формате html

Существует несколько способов вставки видео на сайт. Самый распространенный способ вставка при помощи фрейма.

Видео вставляется при помощи тега <iframe …>. Код следующий:

Таким способом вставляется видео на многих кино-сайтах. А, главный поставщик фильмов, это хостинг от moonwalk.
А выглядит на странице вот так:

Как вставить видео на сайт

И не забудьте задать размеры для видео при помощи параметров width и height. Самое главное соблюдать пропорции высоты и ширины. Иначе картинка будет выглядеть непропорционально: будет черная область или по бокам, или сверху и снизу.

Есть еще один способ при помощи тегов HTML5. Это новейший метод вставки видео. Его не поддерживают старые версии Internet Explorer. А с другой стороны: кто сейчас использует эти жуткие старые браузеры?

Поэтому ориентируемся на новые. Для вставки при помощи тегов html используют базовые теги: <video src=”rolik.mp4” controls></video>
 

Атрибут controls отвечает за вывод на страницу элементов управления.
Кроме того, задаются следующие параметры:

1. Атрибуты width и height это естественно ширина и высота окна вашего видеоролика.
2. Атрибут autoplay. Если включить этот элемент видео начнет показывать сразу после загрузки страницы.
3. Preload если задать такой элемент видео загрузится на страницу, но включено не будет до тех пор пока сам пользователь не запустит ролик. Функция удобна тем, что при включении кнопки play не нужно ждать пока загрузится видео.
4. Атрибут muted. Видео играет без звука. Наверняка многие замечали такую кнопку на пульте управления телевизора. Только на пульте обычно такая кнопка называется mute.
 

В следующий раз рассмотрим, как вставить видео из ютуба. И самое главное, что больше всего раздражает всех пользователей youtube это реклама и как ее отключить на всех роликах раз и навсегда. 

Добавить комментарий


( ! ) Ф.И.О.
( ! ) Текст сообщения: (Не больше 5000 знаков)

( ! )Введите текст с картинки :
Обновить код
Положительный отзыв Положительный отзыв
Отрицательный отзыв Отрицательный отзыв



Коллекция скриптов и модулей   © 2017