HTML5 видео: Как да вградите видео във вашия HTML

Преди HTML5, за да можете да възпроизвеждате видео на уеб страница, ще трябва да използвате приставка като Adobe Flash Player. С въвеждането на HTML5 вече можете да поставяте видеоклипове директно в самата страница.

Това прави възможно възпроизвеждането на видеоклипове на страници, предназначени за мобилни устройства, тъй като приставки като Adobe Flash Player не работят на Android или iOS.

HTML елементът се използва за вграждане на видео в уеб документи. Той може да съдържа един или повече видео източници, представени с помощта на srcатрибута или елемента източник.

За да вградите видео файл, просто добавете този кодов фрагмент и променете srcпътя към вашия видео файл:

   Your browser does not support the video element. Kindly update it to latest version. 

Най елемент се поддържа от всички съвременни браузъри. Не всички браузъри обаче поддържат един и същ формат на видео файл. MP4 файловете са най-широко приетият формат, а други формати като WebM и Ogg се поддържат в Chrome, Firefox и Opera.

За да осигурите възпроизвеждането на вашето видео в повечето браузъри, най-добрата практика е да ги кодирате както в Ogg, така и в MP4 формати и да включите и двете в елемента, както в горния пример. Браузърите ще използват първия разпознат формат.

Ако по някаква причина браузърът не разпознае нито един от форматите, вместо това ще се покаже текстът "Вашият браузър не поддържа видеоелемента. Моля, актуализирайте го до най-новата версия".

Може също да сте забелязали controlsв маркера. Този елемент включва много полезни атрибути за персонализиране на възпроизвеждането.

атрибути

controls

На controlsдръжките на атрибутите дали контрол, като например / бутона за пауза на играта или обема плъзгача се появяват.

Това е булев атрибут, което означава, че може да бъде зададен на true или false. За да го зададете на true, просто го добавете към маркера. Ако не присъства в маркера, той ще бъде зададен на false и контролите няма да се появят.

autoplay

„автоматично пускане“ може да бъде зададено на true или false. Поставяте го на true, като го добавяте в маркера, ако не присъства в маркера, той е настроен на false. Ако е зададено на true, видеото ще започне да се възпроизвежда веднага след като достатъчно количество от видеото е буферирано, за да може да се възпроизвежда. Много хора смятат, че автоматичното възпроизвеждане на видеоклипове е разрушително или досадно. Затова използвайте тази функция пестеливо. Също така имайте предвид, че някои мобилни браузъри, като Safari за iOS, игнорират този атрибут.

Това е друг булев атрибут. Включвайки autoplayв маркера, вграденото видео ще започне да се възпроизвежда веднага щом достатъчно от него се буферира.

Имайте предвид, че много хора смятат, че автоматичното възпроизвеждане на видеоклипове е разрушително или досадно, затова използвайте тази функция пестеливо. Също така имайте предвид, че някои мобилни браузъри като Safari за iOS игнорират изцяло този атрибут.

poster

В posterатрибут е изображението, което показва, включени във видеото, докато потребителят кликне, за да го играят.

Видеоклиповете могат да бъдат скъпи

Въпреки че е по-лесно от всякога да включите видеоклипове на вашата страница, често е по-добре да ги качите в услуга като YouTube, Vimeo или Wistia и вместо това да вградите техния код. Това е така, защото обслужването на видеоклипове може да бъде скъпо както за вас по отношение на разходите на сървъра, така и за зрителите ви, ако имат ограничени планове за данни.

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

И с това продължете и вградете видеоклипове до насита. Или не - това е вашето обаждане.