Как да поставите видео на сайт

Здравейте, приятели и читатели на моя блог! Днес ще ви покажа два начина, как да поставите видео във вашия сайт, а също ще разберем какви са нюансите и особеностите на двата метода.

Поставяне на видео в сайта

Ние живеем в период, когато на уеб страницата освен текст и картинки могат да присъстват и други елементи, в частност видео. Добре направеното видео по темата на статията ще увеличи ранга на страницата и ще задържи за повече време посетителите на вашия сайт. А това, е много полезно.

И така, както ви споменах в началото, съществуват два начина за поставяне на видео които може да използвате:

  • Чрез фреймове (frames);
  • С помощта на тег video, който се появи в HTML5;
  • С помощта на скриптове.

Как да поставите видео от YouTube на сайт?

Много е лесно. Влизате в YouTube и намирате видео клипа, който искате да поставите във вашата страница. Под видеото има няколко бутона, на нас ни трябва бутон “Споделяне”. Кликнете Споделяне и изберете пункт html-код и YouTube ще ви покаже кода, който трябва да се постави във вашата статия, за да се покаже видеото. Кода изглежда така:

<iframe width = "" height = "" src = "" frameborder = "0" allowfullscreen></iframe>

how-to-add-YouTube-video-1

Хайде да го разгледаме, за да имаме представа как работи кода. Атрибути width и height задават ширината и височината на видеото и вие може да ги зададете с размери съответстващи на дизайна на вашия сайт. Празния атрибут allowfullscreen разрешава видеото да се разширява на цял екран. Посетителите често го използват и за това не трябва да се забранява.

Атрибут frameborder задава рамката на видеото. Може да зададете външния и вид със помощта на css. И накрая, най-важния параметър – src. Той показва пътя към видеото на YouTube: https://www.youtube.com/embed/уникален id на видеото.

По този начин, е достатъчно само да знаете адреса на конкретното видео и може да копирате линка и да го поставите в кода. В дадения случай id на видеото е това което започва след watch?v=

how-to-add-YouTube-video-3

Може да натиснете линк “ПОКАЗВАНЕ НА ОЩЕ”, за да се отворят опции за видеото.

how-to-add-YouTube-video-2

С този начин за поставяне на видео всичко е ясно и не би трябвало да имате проблеми. Имайте в предвид, че ако поставяте видео което не е ваше, след време то може да бъде изтрито или преместено и във вашия сайт ще излиза надпис, че видеото е недостъпно. Затова е най-добре да поставяте само ваше видео.

Поставяне на видео чрез html код

Вероятно повечето от вас знаят, че с появяването на новата версия на html – html5 позволи използването на нови тагове и възможности. Появи се таг video който позволява да поставите видео на сайт без да използвате каквито и да било скриптове, а също и да отваряте видеото със вградения плейър. Това се прави със този код:

Таг source показва на браузъра пътя до видеото, а таг type, mime типа на видеото, за да може плейъра правилно да го възпроизведе. Както виждате, за работа във всички браузъри ще ви трябва един и същ файл във три формата. Може да конвертирате видеото в различни формати (mp4, webm, ogg) като използвате която и да е програма за конвертиране на видео или да използвате онлайн ресурс, например сайта: www.online-convert.com.

Ако пътя до видеото и форматите са зададени правилно, то видеото ще работи. Ако не са указани всички формати, то видеото ще се появи само в тези браузъри, където се поддържа формата. Атрибут controls позволява да се покажат елементите за управление на видеото, като спиране, промяна на звука и т.н. Затова този атрибут е важен и необходим за удобството на потребителя.

Има и други начини за поставяне на видео, например може да свалите скрипт който ще включва плейър за възпроизвеждане на видео, например доста известния flow player. Трябва да го свалите и да го разархивирате на вашия сървър, да поставите код със пътя до плейъра в html файла и да поставите самото видео с помощта на функция. Ръководство за използване на плейъра може да намерите в документацията към него.

С това ви казвам довиждане, но не за дълго и се надявам тази статия да е полезна за вас. Успех.

С уважение, Николай Томов.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *