Від автора: вітаю всіх читачів 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 – важливий атрибут, в ньому вказується шлях до сторінки, де можна завантажити потрібний плагін для того, щоб браузер міг зрозуміти і прочитати дані.
Що ж, сьогодні ми з вами розглянули досить багато способів вставити медиафайл на сторінку, так що у вас досить багато варіантів, як діяти. Сподіваюся, ця стаття була для вас корисною і прощаюся з вами, але ненадовго.
