1. Фрейми: вставка відео з YouTube
2. скрипти
3. HTML5
4. висновок

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

Існує кілька способів додавання відеоролика на сайт:

• фрейми;
• скрипти;
• тег video, що з'явився в HTML5.

Їх і розглянемо.

Фрейми: вставка відео з YouTube

Все-таки більшість роликів розміщено саме на цьому відеохостингу. Даною практиці сприяє хороша індексація ролика пошуковими системами, простота розміщення, а також той факт, що YouTube надає своїм користувачам необмежений простір, а значить, тримаючи ролики на ньому, ви економите орендоване за гроші дисковий простір.

Для розміщення відео з YouTube на своєму інтернет-ресурсі виконайте ряд наступних дій.

1. Відкрийте відео, яке хочете розмістити.
2. Під ним натисніть кнопку і клацніть на вкладці.
   
3. Скопіюйте код з з'явилася рядки.
4. Вставте на сторінку свого сайту. Куди ви додасте фрейм, там і з'явиться відео.

Щоб настроїти інші параметри не обов'язково копатися в коді. Натисніть розташовану під відео кнопку ЩЕ. Тут ви можете подивитися, як буде виглядати вставлений на сторінку ролик, а також змінити деякі параметри.

Розмір відео. Із списку виберіть потрібну ширину і висоту. Якщо відповідного варіанту немає, то клацніть на пункті Інший розмір і задайте його в пікселях, ввівши значення в поля, що з'явилися праворуч від списку.

Схожі відео після завершення перегляду. За замовчуванням прапорець встановлено, а це значить, що коли ролик закінчиться, всередині фрейму з'являться картинки з посиланнями на інші ролики схожої тематики (релевантність визначає YouTube). Якщо ви не хочете цього, зніміть прапорець.

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

Показати назву відео та функції програвача. Якщо знятий цей прапорець, то користувач не побачить елементи, розташовані у верхній частині фрейму: заголовок, кнопку перегляду від імені користувача та кнопку Поділитися.

Включити режим підвищеної конфіденційності. В цьому режимі YouTube зберігає інформацію тільки про тих, що проглянули ролик відвідувачів, без нього відеохостинг збирає знеособлену статистику про всі, які відкрили сторінку з фреймом.

Зверніть увагу, як у міру налаштування змінюється HTML-код. За замовчуванням він має вигляд:

<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder = "0" allowfullscreen> </ iframe>

Що це означає?

• <Iframe> </ iframe> - теги, що створюють, власне, фрейм - вікно, в якому відтворюється відео.
• width - значення атрибута визначає ширину фрейму.
• height - задає висоту.
• src - містить посилання на відеоролик.
• frameborder - встановлює ширину рамок фрейма.
• allowfullscreen - порожній атрибут, що дозволяє користувачам розгортати відео на весь екран. Якщо його прибрати, то такої можливості у них не буде.

Призначення інших ділянок коду ви зможете зрозуміти, налаштовуючи параметри відображення відео і спостерігаючи, як змінюється HTML-код.

Єдиний не розглянутий, але важливий момент - як зробити так, щоб ролик відтворювався автоматично відразу після завантаження сторінки. Для цього до значення тега src (до адреси ролика) досить додати & autoplay = 1. тоді замість

<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder = "0" allowfullscreen> </ iframe>

Ми отримаємо:

<Iframe width = "560" height = "315" src = "https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder = "0" allowfullscreen> </ iframe>

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

скрипти

Для вставки відео на сторінки можна використовувати і спеціальні плеєра - написані, в основному, на JavaScript з використанням бібліотеки JQuery, додатки. До мінусів їх експлуатації відноситься відносна складність установки, до плюсів - велика кількість налаштувань.

Програвачів відео для сайту розроблено досить багато. Як приклад популярних скриптів можна назвати FlowPlayer і JW Player .

У загальному випадку процес підготовки веб-програвачів до роботи виглядає так.

1. Ви вибираєте і завантажуєте плеєр.
2. Завантажуєте бібліотеки, які необхідні йому для роботи.
3. Підключаєте скрипти.
4. Прописуєте код виведення програвача на екран.

На жаль, докладний опис роботи з Web-плеєрами - тема окремої статті, тому далі затримуватися на ньому не буду, а опишу краще третій метод.

HTML5

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

Найпростіший код вставки відео буде таким:

<Video src = "film.webm"> </ video>

Де film.webm - посилання на відтворений ролик.

Але щоб відео відображалося коректно і з заданими параметрами, код потрібно поміняти приблизно на такий:

<Video controls> <source src = "videos / play.mp4" type = "video / mp4"> <source src = "videos / play.ogv" type = "video / ogg"> <source src = "videos / play .webm "type =" video / webm "> </ video>

• video - контейнер, що відображає ролик.
• source - тег, що містить інформацію про відео. Зверніть увагу, що в прикладі код містить посилання аж на три ролика різних форматів. Справа в тому, що поки різні браузери підтримують не всі кодеки, і можливі проблеми з відтворенням вирішуються кодуванням одного і того ж ролика за допомогою різних кодеків і одночасним додаванням файлів в тег.
• controls - включає панель відтворення.
• src - задає шлях до програвати ролику.
• type - вказує тип контенту, на який посилається атрибут src.
• Є й додаткові, що не потрапили в код, атрибути, що дозволяють налаштувати програвання.
• width - визначає ширину області відображення.
• height - задає висоту.
• autoplay - відтворює ролик автоматично після завантаження сторінки.
• loop - зациклює відтворення.
• preload - завантажує відео разом зі сторінкою.
• poster - містить адресу зображення, яке буде показуватися замість ролика, якщо він раптом з якихось причин не відтворить.

висновок

Це основні, які використовуються в даний час (2017 рік), способи вставки відео. Фрейми з YouTube - найпростіше і зручний, що можна запропонувати, але не всім сподобається, що їх відео зберігаються на сторонньому ресурсі, де можуть бути заблоковані або видалені. Використання HTML5 і вставка тега video - варіант трохи складніше, але зате він універсальний і дозволяє програвати відео, що зберігаються де завгодно. Використання скриптів, на мій погляд, самий незграбний спосіб, але зате вони дозволяють веб-майстру тонко налаштувати вікно ролика, часто не вдаючись для цього до зміни HTML і CSS .