Як розмістити відео на сайті

21

Від автора: вітаю всіх читачів webformyself. У минулій статті ми розглядали установку лічильника, а сьогодні я вам покажу, як розмістити відео на сайті двома способами і які у кожного особливості.

Вставка відео на сайт

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

Як я вже і говорив на початку, існує два способи вставки, які сьогодні можна використовувати:

Через фрейми

З допомогою тега video, який з’явився в html5

З допомогою скриптів

Як розмістити відео з Youtube на сайті?

Це дуже просто. Йдете на ютуб і знаходите там той ролик, яке вам потрібно вставити до себе на сторінку. Під ним є пару кнопок. Зокрема, кнопка «Поділитися». Тут вибираємо пункт html-код і ютуб покаже нам код, який потрібно вставити у себе в статті, щоб відео вывелось в ній. Код має таку будову:

Як розмістити відео на сайті

Давайте ви ньому трохи розберемося, щоб розуміти, як він працює. Атрибути width і height вказують ширину і висоту нашого контейнера, ви можете виставити їх по дизайну вашого сайту. Порожній атрибут allowfullscreen дозволяє розширювати вміст на весь екран, користувачі часто це роблять і не потрібно їм забороняти це.

Frameborder – це рамка кадру, але вона нам ні до чого. Ви можете задати її самостійно через css. Нарешті, самий важливий параметр – src. Він вказує шлях до відео на youtube. https://www.youtube.com/embed/уникальный id відео.

Таким чином, вам достатньо знати адресу конкретного ролика і його можна самостійно скопіювати і вписати в код.

Як розмістити відео на сайті

В даному випадку id відео це те, що йде після watch?v=.

Отже, з цим способом усі зрозуміло, ніяких проблем у вас виникнути не повинно. Але якщо ви не ставите своє відео, то з часом воно може бути вилучене або переміщено на вашому сайті буде зазначено, що воно недоступне. Саме з цієї причини краще ставити свої відеоролики.

Вставка через html-код

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

Так ось, там з’явився також тег video і він дозволяє вставити відео на сайт без будь-яких скриптів, а також відтворити його через вбудований плеєр. Це робиться ось таким кодом:

Одинарні теги source показує браузеру шлях до файлів і їх MIME-тип для правильної інтерпретації. Як бачите, для роботи у всіх браузерах нам знадобиться один і той же файл в трьох форматах. Сконвертувати можете в будь-якому тлумачному конвертері або в онлайн-сервісі. Наприклад, online-convert.com.

Як розмістити відео на сайті

Відмінно, якщо шлях вказаний правильно і всі задані формати, відео виведеться. Якщо не всі формати вказані, то воно з’явитися тільки в тих браузерах, де підтримується формат. Атрибут controls дозволяє вивести елементи управління роликом, щоб мати можливість зупиняти його, змінювати звук і т. д. Це потрібно майже завжди, тому просто необхідний атрибут для зручності користувача.

Інші способи вставки

Однак крім цих варіантів є й інші. Наприклад, ви можете завантажити скрипт, який буде виводити плеєр. Один з найпопулярніших – FlowPlayer. Його потрібно завантажити, розпакувати на ваш сайт, прописати шлях до скрипта в html-файлі і вставити саме відео за допомогою функції. Керівництво по використанню плеєра можна знайти в документації до нього.

Приклад вставки відео через flowplayer. Першим ділом потрібно підключити скрипт в head:

Далі у body там, де потрібно вивести ролик, потрібно написати приблизно наступне:

flowplayer(«player», {src : «http://url_вашего_ресурса/flowplayer/flowplayer-3.2.2.swf», wmode: «transparent»});

Для працездатності всієї справи:

Вкажіть правильні шляхи до файлів

Зверніться до ссылке з id = js-player», в яку вставлено наше відео, та напишіть їй пару css-стилів. Наприклад, зробіть її блокової для коректного відображення і додайте оформлення, якщо це необхідно. Найголовніше, задайте висоту і ширину.

Ну а раніше в html відео часто вставляли через тег object, вказуючи в ньому шлях до потрібного плагіну, який міг би розпізнати відео і відтворити його. В html5 його використання засуджується.

Тег object багато в чому схожий на video, адже в ньому теж використовуються одинарні теги, а саме param. У них прописуються різні налаштування. Інший тег, за допомогою якого можна вставити медіафайли – embed.

Якщо вибирати між ними, то для сучасних браузерів краще використовувати embed. Для цього тега потрібно вказати такі атрибути, як:

Width і height – тут все зрозуміло, це розміри;

Src –шлях до відео, яке потрібно відобразити ;

Type — MIME-тип вмісту;

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

Що ж, сьогодні ми з вами розглянули досить багато способів вставити медиафайл на сторінку, так що у вас досить багато варіантів, як діяти. Сподіваюся, ця стаття була для вас корисною і прощаюся з вами, але ненадовго.