Як вставити відео на сайт в HTML і популярних CMS?
Розмістити на своєму сайті ролик з популярного відеохостингу не важко. Скажімо, якщо ваш ресурс працює на WordPress , То для вставки відео із YouTube досить просто додати в запис посилання на нього, і ролик вбудується автоматично (при виправленні запису переконайтеся, що редактор працює в візуальному режимі, і вставте посилання в текст). Але якщо ви хочете налаштувати деякі параметри (наприклад, задати ширину і висоту вікна з роликом), або контент знаходиться не на відеохостингу, а на самому сайті, або блог працює не на WordPress, тоді процедура стає трохи інший.
Існує кілька способів додавання відеоролика на сайт:
- фрейми;
- скрипти;
- тег video, що з'явився в HTML5.
Їх і розглянемо.
Фрейми: вставка відео з YouTube
Все-таки більшість роликів розміщено саме на цьому відеохостингу. Даною практиці сприяє хороша індексація ролика пошуковими системами, простота розміщення, а також той факт, що YouTube надає своїм користувачам необмежений простір, а значить, тримаючи ролики на ньому, ви економите орендоване за гроші дисковий простір.
Для розміщення відео з YouTube на своєму інтернет-ресурсі виконайте ряд наступних дій.
- Відкрийте відео, яке хочете розмістити.
- Під ним натисніть кнопку і клацніть на вкладці.
- Скопіюйте код з з'явилася рядки.
- Вставте на сторінку свого сайту. Куди ви додасте фрейм, там і з'явиться відео.
Щоб настроїти інші параметри не обов'язково копатися в коді. Натисніть розташовану під відео кнопку ЩЕ. Тут ви можете подивитися, як буде виглядати вставлений на сторінку ролик, а також змінити деякі параметри.
Розмір відео. Із списку виберіть потрібну ширину і висоту. Якщо відповідного варіанту немає, то клацніть на пункті Інший розмір і задайте його в пікселях, ввівши значення в поля, що з'явилися праворуч від списку.
Схожі відео після завершення перегляду. За замовчуванням прапорець встановлено, а це значить, що коли ролик закінчиться, всередині фрейму з'являться картинки з посиланнями на інші ролики схожої тематики (релевантність визначає 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 .
У загальному випадку процес підготовки веб-програвачів до роботи виглядає так.
- Ви вибираєте і завантажуєте плеєр.
- Завантажуєте бібліотеки, які необхідні йому для роботи.
- Підключаєте скрипти.
- Прописуєте код виведення програвача на екран.
На жаль, докладний опис роботи з 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 .