За да можем всички да се потопим в спомените си за момент, един пример за това, как типично се вграждат видеоклипове в уебсайт:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Такава синтаксис е далеч от красив.
Но дори ако изключим естетичния аспект: Синтаксисът в този вид е прекалено податлив на грешки и прекалено сложен. В HTML5 вграждането на видеоклипове е много по-лесно. За целта се използва елементът video.
Ето един пример за това как може да се вгради този video елемент:
<video src="video.ogv" width="300" height="200"> ваш браузър не поддържа HTML5 </video>
Това е най-лесният начин в този вид. Три атрибута са ключови при този вид синтаксис. Чрез src се посочва видеоклипът, който да се вгради. Внимавайте да посочите правилния път. Двете атрибута width и height определят широчината и височината на видеоклипа. Ако не се посочат нито един от двете стойности, видеоклипът ще се покаже в оригиналния си размер. Ако посочите само една стойност, другата ще бъде автоматично пресметната от браузъра. Атрибутът autoplay насочва браузъра да стартира видеоклипа автоматично, след като страницата е заредена. Този атрибут обикновено не трябва да се задава, тъй като автоматичното възпроизвеждане обикновено не се желае от потребителите. Това важи още повече за потребителите, използващи мобилни устройства с ниска пропускливост. Друг полезен атрибут е controls. Като го използвате, браузърът ще покаже стандартни контроли за възпроизвеждане и звук.
<video src="video.ogv" width="300" height="200" controls> ваш браузър не поддържа HTML5 </video>
Ето как изглежда в браузъра:
Чрез показаната лента можете не само да поставите на пауза и да рестартирате видеоклипа, но и да регулирате силата на звука.
Чрез атрибута poster моментално може да се посочи изображение, което да се показва до стартирането на видеоклипа. Използва се атрибута poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> ваш браузър не поддържа HTML5 </video>
Повторно обърнете внимание на правилния път, за да се види изображението. 
Бъдете внимателни при използването на атрибута autoplay. Защото този атрибут задава, че видеоклипът трябва да се възпроизведе автоматично, щом е наличен.
<video src="video.ogv" width="300" height="200" autoplay> ваш браузър не поддържа HTML5 </video>
Относно трафика, атрибутът preload може да бъде интересен. Този атрибут управлява предварителното зареждане. Атрибутът може да приеме следните стойности:
• auto – Браузърът може да зареди целия файл.
• none – Файлът не трябва да бъде предварително зареден.
• metadata – Файлът може да бъде предварително зареден.
Ако липсва атрибутът за предварително зареждане, браузърът ще прилага предварителните си настройки.
Видеоклипове и Кодеци
Тези, които се занимават с вграждането и възпроизвеждането на видеоклипове в уебсайтове, някога ще се сблъскат с проблема на различните кодеци. Благодарение на тези кодеци, видеоклиповете могат ефективно да се компресират и декомпресират. Проблемът е, че производителите на браузъри все още не са се споразумели за общ формат на кодека. За HTML5 (и накрая за вас също) това означава, че няма единен кодек за видеоклипове и аудио файлове.
За видеоклиповете сега стандартизирани са форматите Ogg и MP4. Затова винаги сте в безопасност, когато предлагате видео в тези два формата. За това към елемента за видео се присвояват два source елемента.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Тук не посочвате източника на видео в елемента video. Вместо това се правят само общи изявления за представянето. Кое видео да се покаже, се определя чрез елемента source. На атрибута src се присвоява съответното видео. След type следва спецификация на вида видео или в кой формат е видеото.
Ако са посочени няколко елемента source, браузърът винаги ще възпроизведе първото видео, което "подхожда". Значението на "подхождащо" ще бъде обяснено по-долу.
Но наистина кой браузър поддържа кой формат? Отговорът на този въпрос се дава в следната таблица.
| Браузър | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | От версия 9 | |
| Mozilla Firefox | Да | |
| Google Chrome | Да | Да |
| Opera | Да | |
| Safari | Да | |
| iPhone | Да | |
| Android | Да |
Таблицата демонстрира дилемата: интерпретацията на форматите се разпределя почти равномерно между различните браузъри. Поради това почти сме принудени да посочим видеа в двете формата.
Чрез media атрибута, който може да бъде присвоен само на елемента source, можете ясно да посочите за кой тип медийно съдържание е подходящото видео. За посочване на видеа специално за определени устройства, на атрибута src се присвоява media атрибута. Чрез този media атрибут се посочва желаният тип от медията.
Един възможен начин за използване на елемента source би изглеждал по следният начин:
<video width="400" height="300">
<!-- Само за мобилни устройства -->
<source src="video_mobil.ogg" media="handheld" />
<!—Всички останали устройства -->
<source src="video_normal.ogg" media="all" />
</video>
Тук се проверява дали устройството е мобилно чрез атрибута media. В този случай се възпроизвежда видео в по-малък размер. Ако става дума за друго устройство, се взима стойността all.
Безопасно вграждане на видео
HTML5, както е известно, все още не е поддържан от всички браузъри. Това е валидно и за елемента video. Решение предлага комбинация от различни техники за вграждане. В този случай се комбинират добре познатите елементи object и embed с video. Това може да изглежда по следният начин:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Вградените по този начин видеа ще могат да се възпроизвеждат в повечето браузъри. Браузърите, които познават елемента video, ще го използват. Другите браузъри обаче ще използват информацията от object или embed елементите.
