1. Як завантажити відео на Youtube:
2. Вставити на сайт відео з Youtube:
3. Вставити на сайт відео з Vimeo:
4. Вставити на сайт відео з Rutube:
5. Вставити на сайт відео з VK (Вконтакте):
6. Вставити відео на сайт за допомогою HTML5
7. Вставити відео на сайт за допомогою плеєра
8. Як вставити код відео в html
9. Як вставити відео в статтю WordPress

У цій статті ми поговоримо про те, як вставити відео на сайт і навчимося:

1. Розміщувати свої файли на відео хостингах і відображати їх на сайті.
2. Завантажувати відео на свій хостинг і відображати їх на сайті за допомогою плеєра.

Ні для кого не секрет, що відео з кожним роком стає все більш популярним видом контенту. Сьогодні звичайних користувачів вже не просто затримати на своєму сайті або ресурсі тільки за допомогою красивих картинок і добре написаних текстів, потрібно відео яке зробить перебування на сайті ще більш цікавим. Перейдемо до інструкцій:

Як завантажити відео на Youtube:

1. Насамперед Вам необхідно увійти в свій аккаунт YouTube.
2. Натисніть кнопку Додати відео в верхній частині сторінки.
3. Виберіть ролик для завантаження. (Враховуйте, що відео не повинно порушувати авторські права. Якщо Ви хочете накласти на відео відому музику, то доведеться її купити).
4. Поки файл завантажується заповніть основну інформацію про ролику і при необхідності додаткові параметри.
5. Щоб додати відео на YouTube, натисніть Опублікувати.
6. Поки ви не натиснете кнопку Опублікувати, відео доступне тільки вам.

З більш докладною інструкцією по завантаженню відео на Youtube можете ознайомитися на сторінці supporta

Вставити на сайт відео з Youtube:

Щоб вставити вже завантажене (наявне) на Youtube відео:

1. Відкрийте цікавить Вас відео на Youtube ;
2. Натисніть на що знаходиться під відео кнопку «Поділитися»;
3. Виберіть вкладку «HTML» і скопіюйте з'явився код; (Щоб скопіювати код швидше: натисніть правою кнопкою миші по відео і виберіть пункт «Копіювати HTML-код.)
4. Вставте скопійований код в потрібну частину сайту.
5. Збережіть зміни і обновіть сторінку.

Вставити на сайт відео з Vimeo:

1. Відкрийте вподобане на Vimeo Вам відео;
2. Натисніть на що знаходиться під відео кнопку «Share»;
3. У що з'явився віконці в пункті «Embed» скопіюйте код;
4. Вставте скопійований код в потрібну частину сайту.
5. Збережіть зміни і обновіть сторінку.

Вставити на сайт відео з Rutube:

1. Відкрийте потрібний на RuTube Вам відео;
2. Натисніть на що знаходиться під відео кнопку «поділитися»;
3. Виберіть вкладку «Код вставки»
4. Скопіюйте з'явився код;
5. Вставте скопійований код в потрібну частину сайту.
6. Збережіть зміни і обновіть сторінку.

Вставити на сайт відео з VK (Вконтакте):

1. Відкрийте відео; (Можливо знадобиться авторизація).
2. Натисніть на що знаходиться під відео кнопку «Ще»;
3. Виберіть вкладку «Експортувати» у вікні «Код для вставки» скопіюйте з'явився код;
4. Вставте скопійований код в потрібну частину сайту.
5. Збережіть зміни і обновіть сторінку.

Ми розглянули кілька способів вставки коду з відео які вже завантажені на один з популярних відео хостингів.

Тепер розглянемо варіанти відтворення відео з завантаженим відео на свій сервер.

Вставити відео на сайт за допомогою HTML5

Для цього способу Вам знадобиться тег video

<Span class = "tag"> & lt; <Span class = "title"> video </ span> & gt; </ Span>

<Span class = "tag"> & lt; <Span class = "title"> source </ span> <span class = "attribute"> src = <span class = "value"> "URL" </ span> </ span> & gt; </ Span>

<Span class = "tag"> & lt; / <Span class = "title"> video </ span> & gt; </ Span>

1. Завантажуємо на сервер відео;
2. Копіюємо вищевказаний код;
3. Вставляємо в потрібну нам частину сайту скопійований код;
4. Змінюємо URL на шлях до файлу який ми розмістили на хостингу
5. Зберігаємо зміни і оновлюємо сторінку.

Для тега video існує кілька атрибутів, так само деякі з них зустрічаються в кодах які пропонують популярні відео хостинги.

В першу чергу хотілося б сказати про таких атрибутах як height (висота), width (ширина).

З їх допомогою ви можете налаштувати висоту і ширину області для відтворення відеоролика.

• src - це найважливіший атрибут, він вказує шлях до відеоролика.
• autoplay - відтворення відео відразу після завантаження сторінки.
• loop - повтор відтворення відео по завершенню
• poster - вказує адресу картинки, яка буде відображатися, поки відео недоступне або не чути.
• preload - завантаження відео разом із завантаженням веб-сторінки.

Вставити відео на сайт за допомогою плеєра

Зараз в інтернеті є безліч різних плеєрів які ви можете використовувати на своєму сайті. Як приклад я вибрав один з популярних flowplayer.

1. скачайте плеєр , А потім його розархівуйте;
2. Створіть папку і помістіть в неї файли з архіву;
3. Підключіть javascript-файл плеєра до html-файлу. Для цього всередині тега head, пропишіть наступний код:
   

   <Script src = "flowplayer.min.js"> </ script>

   
   Будьте уважнішими прописуючи шлях до файлу. Ви можете не створювати папку, а покласти файл скрипта в будь-яку іншу папку наприклад в папку з іншими скриптами.

4. Тепер розмістимо сам плеєр в коді сторінки і відповідно відео файл.
   

   <! - the player ->

   <Div data - swf = "flowplayer.swf" data - ratio = "0.4167">

   <Video>

   <Source type = "video / webm" src = "https: // шлях до вашого відео файлу якщо він в форматі .webm">

   <Source type = "video / mp4" src = "https: // шлях до вашого відео файлу якщо він в форматі .mp4">

   </ Video>

   </ Div>

Останню версію ви завжди можете завантажити на офіційному сайті. Потрібна авторизація.

Як вставити код відео в html

Раніше ми розглянули як розміщувати свої файли на відео хостингах і навчилися копіювати потрібний нам код. У цій частині статті розберемо докладніше куди ж вставляти скопійований нами код. І коротко поговоримо про налаштування відображення.

Традиційно вид більшості html сторінок виглядає приблизно наступним чином:

<! doctype html>

<Head>

Здесьподключаютсяскріптиіпрочіефайли

</ Head>

<Body>

Етотелосайтаздесьразмещаетсяосновнойкодстраніци

</ Body>

Для відображення нашого відео з відеохостингу такого як youtube, досить буде буде помістити скопійований код в тіло сайту. У випадку з плеєром дій трохи більше.

Але так виглядає сама елементарна сторінка, на практиці ж тіло сайту складається з безлічі різних частин (блоків).

Наприклад один з них div.

Ми можемо розмістити код нашого відео в блок і поставити цього блоку потрібні параметри ... наприклад вирівняти по центру.

<Div align = "center">

</ Div>

Темі оформлення блоків можна присвятити не одну статтю. Але зараз не про це.

Знайдіть потрібний блок і вставте код Вашого відео перед, в або після нього в залежності від необхідності.

Після збережіть зміни і обновіть сторінку для перевірки.

Як вставити відео в статтю WordPress

Щоб розмістити відео в статті або в сторінці wordpress достатньо перейти в режим «текст» і вставити код в потрібну вам частину (тут же ви можете змінювати значення атрибутом, таких height, width) після переходу в режим «візуально» буде відображатися плеєр.

На цьому я закінчую статтю сподіваюся вона була корисною для Вас.