• Главная
  • Карта сайта
Не найдено

Як вставити відео на сайт в HTML і популярних CMS?

  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 .

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью