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

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

Здравствуйте!  В этом уроке разберем как вставить видео на сайт.  Существуют 2 способа вставки видео на сайт. Это используя сервис видеохостинга как например ютуб, рутуб и им подобные, а второй используя тег video, который появился в HTML5.
Самый простой  это конечно же первый способ.  Если вы хотите  загрузить видео  с видеосервиса  то вам придется  выполнить 3 пункта:
1.  Сперва надо зарегистрироваться на видеосервисе (Например: Youtube)
2. После регистрации вы сможете  загрузить видео
3. Остается получить код видео и собственно вставить его на свой сайт

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

 

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

Сперва у вас должен быть  видео-ролик, который  вы хотите добавить. Предположим, что  таковой у вас есть и сохранен на вашем компе.
Теперь идите  на сайт www.youtube.com.  Далее  нажимайте  на кнопку  «Войти»,  в верхнем правом углу.  После чего  входите с помощью учетной записи Google.  Если у вас нет аккаунта на Гугл, то вам следует зарегистрироваться.
как загрузить видео на ютуб
После того, как войдете на youtube под своим аккаунтом, жмите на кнопку «Добавить видео». Откроется страничка с выбором файла для загрузки, где  вы можете выбрать нужный файл с видео, хранящемся у вас на компьютере.

Тут же начнется загрузка файла.  Стоит немного подождать пока загружается видео
После полной загрузки видео вы сможете перейти по ссылке  на страницу с вашим новым видео.


Когда Вы перейдете  на страницу с видео, то увидите ваше только что загруженное видео.


3. Теперь все что вам остается та это получить код для вставки видео на сайт.  Для этого  следует клацнуть на  «Поделиться», а потом на вкладке «HTML-код».

Теперь вы уведите код для вставки видео на сайт этот код надо скопировать и вставить на  веб-страницу  в то место, где вам удобно.

Читайте также  Как добавить картинку на сайт

 

Вот пример кода:
<Iframe width = «560» height = «315» src = «// www.youtube.com/embed/FkX88N4pCow?rel=0» frameborder = «0» allowfullscreen> </ iframe>

Вставка видео  на сайт  с помощью тега video.

Тег video, который появился в HTML5,   позволяет добавлять видео на веб-страницу с помощью плеера правда поддерживает такие форматы видео: ogg, mpeg4, webm.
Вот его синтаксис:

<video>
 <source src="URL">
</video>

Имеет следующие атрибуты:
autoplay —  видео будет воспроизводиться сразу после загрузки веб-страницы.
controls —  позволяет добавить элементы управления видео в плеер
height — задает высоту видео-плеера
loop —  зацикливает воспроизведение видео.
src —  задает путь к файлу с видеороликом.
width — позволяет задать ширину видео

Пример кода тега video

<!DOCTYPE html><html>
 <head>
  <metacharset="utf-8">
  <title>video</title>
 </head>
 <body>
  <video width="500"height="400"controls="controls"poster="video/duel.jpg">
   <sourcesrc="video/duel.ogv"type='video/ogg; codecs="theora, vorbis"'>
   <sourcesrc="video/duel.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
   <sourcesrc="video/duel.webm"type='video/webm; codecs="vp8, vorbis"'>
   Тег video не поддерживается вашим браузером. 
   <a href="video/duel.mp4">Скачайте видео</a>.
  </video>
 </body>
</html>

Вставка видео  на веб-страницу при помощи embed

Элемент embed  позволяет загружать на веб-страницу различные объекты ( видеофайлов, флэш-ролики, аудио-файлы), которые браузер не понимает. Чем  сей метод отличается от предыдущих?

В основном такие объекты как правило требуют специальной программы — плагина, для того чтобы браузер  понимал  как воспроизводить эти типы файлов.

Вот пример вставки флеш-ролика с помощью тега embed.

<!DOCTYPE html>
<html>
  <head>
    <metacharset="utf-8">
    <title>Пример кода с тегом EMBED</title>
  </head>
  <body>
    <embed src="images/examle.swf"width="400"height="300"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer">  
  </body>
</html>

Атрибуты тега embed
align — задает обтекание текстом объекта
height — позволяет указать высоту объекта
hidden —  задает скрыт объект на странице или нет.
hspace — горизонтальное поле для окружающего контента
pluginspage — задает адрес страницы  в Интернете, откуда можно скачать и установить плагин
src — путь к файлу
type — задает MIME-тип  объекта
vspace — указывает вертикальное поле для объекта
width — ширина встроенного объекта

Смотрите видеоурок как добавить видео на сайт

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: