Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:37
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №10: добавление видео в HTML

Добавление видео в HTML

Некоторых мучает вопрос, как добавить на свой сайт видео-ролики, клипы, фильмы. Сделать это не так уж сложно, как может показаться на первый взгляд. На этом уроке мы рассмотрим способы добавления видео в HTML код.

Тег <video> к сожалению работает только в HTML5. Служит для добавления, воспроизведения и управления настройками видеоролика на странице. Путь к видео файлу задается через параметр src или тег <source>. К сожалению нет браузера который поддерживает одновременно все кодеки, однако лидером в этом деле является Google Chrome. Чтобы видео воспроизводилось во всех браузерах, его необходимо кодировать с помощью различных кодеков и одновременно добавлять файлы различных форматов.

Тег <video> имеет следующие параметры:

  • autoplay - видео автоматически начинает проигрываться после загрузки веб-страницы.
  • controls - создает панель управления к вставленному видеоролику.
  • width - задает ширину области для воспроизведения видеоролика
  • height - задает высоту области для воспроизведения видеоролика
  • loop - после завершения видеоролика, проигрывает его сначала.
  • post - задает адрес изображения, которое будет отображаться, если видео недоступно или не может быть проиграно.
  • preload - задается для загрузки видеоролика вместе с загрузкой страницы.
  • src - указывает путь к файлу воспроизводимого видеоролика.

Пример вставки видео с различными кодеками в код HTML:

<html> <head> <title>video</title> </head> <body> <video width="400" height="300" controls="controls" poster="video.jpg"> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> </video> </body> </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-код". В результате появится код вроде этого:
<iframe width="560" height="315" src="//www.youtube.com/embed/8sbKVdHhz6U" frameborder="0" allowfullscreen></iframe>

Его можно отредактировать под ваш сайт, главное не изменять ссылку и вставлять в HTML код страницы. Выглядеть он будет так:

С vk.com все аналогично, под видео с правой стороны находится надпись - "Поделиться" за тем, жмете "Эскорт видеозаписи" и получаете код для вставки. Вид в браузере:

Коды видеороликов, как правило окружают парным тегом <center>, для того, чтобы окно плеера находилось по центру. Для более детальной настройки таких окон используется CSS. Параметры тега <iframe> будут рассмотрены тут - Iframe в HTML


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru