Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:
Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь: R598551293139
Урок №10: добавление видео в HTML
Некоторых мучает вопрос, как добавить на свой сайт видео-ролики, клипы, фильмы. Сделать это не так уж сложно, как может показаться на первый взгляд. На этом уроке мы рассмотрим способы добавления видео в HTML код.
Тег <video> к сожалению работает только в HTML5. Служит для добавления, воспроизведения и управления настройками видеоролика на странице. Путь к видео файлу задается через параметр src или тег <source>. К сожалению нет браузера который поддерживает одновременно все кодеки, однако лидером в этом деле является Google Chrome. Чтобы видео воспроизводилось во всех браузерах, его необходимо кодировать с помощью различных кодеков и одновременно добавлять файлы различных форматов.
Тег <video> имеет следующие параметры:
autoplay - видео автоматически начинает проигрываться после загрузки веб-страницы.
controls - создает панель управления к вставленному видеоролику.
width - задает ширину области для воспроизведения видеоролика
height - задает высоту области для воспроизведения видеоролика
loop - после завершения видеоролика, проигрывает его сначала.
post - задает адрес изображения, которое будет отображаться, если видео недоступно или не может быть проиграно.
preload - задается для загрузки видеоролика вместе с загрузкой страницы.
src - указывает путь к файлу воспроизводимого видеоролика.
Пример вставки видео с различными кодеками в код HTML:
Еще один способ добавить видео на страничку, с помощью тега <img> и параметра dynsrc. Синтаксис:
<img dynsrc="C:\ваш файл.avi" width="30%" height="30%"> или <img dynsrc="http://Video/file.avi" width="30%" height="30%">
Появится небольшое окно, где будет воспроизводится ваше видео:
Добавление видео с YoTube и Vk
Однако, самый популярный и в тоже время простой способ вставить видео в ваш HTML код, это загрузить его на Youtube.com, если это видеоролик или клип или в Vk.com, если это объемное видео или фильм.
В случае с Youtube.com, загрузите видео на ваш канал или выберете уже готовое, кем-то закачанное, видео (авторское право при этом не нарушается). За тем под плеером нажмите вкладку "Поделиться" и "HTML-код". В результате появится код вроде этого:
Его можно отредактировать под ваш сайт, главное не изменять ссылку и вставлять в HTML код страницы. Выглядеть он будет так:
С vk.com все аналогично, под видео с правой стороны находится надпись - "Поделиться" за тем, жмете "Эскорт видеозаписи" и получаете код для вставки. Вид в браузере:
Коды видеороликов, как правило окружают парным тегом <center>, для того, чтобы окно плеера находилось по центру. Для более детальной настройки таких окон используется CSS. Параметры тега <iframe> будут рассмотрены тут - Iframe в HTML
R598551293139
