Добавяне на видео към вашия уебсайт с HTML5

В първия от неговите блогове за PC Pro , уеб разработчик Ян Девлин разкрива как да вградите видео във вашия уебсайт с HTML5

как да се направи lan сървър в

Вероятно най-голямата и най-обсъжданата функция на HTML5 е вграденото видео. Понастоящем единственият метод за добавяне на видео съдържание към уебсайта ви е с приставка на трета страна като Flash, QuickTime или RealPlayer. С появата на HTML5 и видеоелемента всичко това ще се промени, като видеоподдръжката се обработва от уеб браузъра, премахвайки необходимостта от поддръжка от трети страни.

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

Типове файлове и съвместимост на браузъра

Като начало ще разгледаме накратко различните типове видео файлове, които се поддържат в HTML5. Това са Theora OGG и H.264 (.mp4). Различните браузъри поддържат различни типове, а някои изобщо не поддържат никакви. Следващата таблица показва това:

	Theora OGG	H.264 (mp4)
Firefox 3.5+	✓	х
Chrome 3+	✓	✓
Safari 3+	х	✓
Opera 10.5+	✓	х
Internet Explorer 8	х	х
Internet Explorer 9	х	✓
iPhone	х	✓
Android	х	✓

Кодеци и други технически проблеми

Самият HTML5 не посочва видео кодек, който да се използва и това доведе до аргументи кой е най-доброто за използване в мрежата . Така че, за да покрием всички браузъри, трябва да поддържаме и двата кодека.

И тогава, разбира се, има Internet Explorer. В момента нито една от пуснатите версии на Internet Explorer не поддържа видеоелемента и все още се изисква плъгин за възпроизвеждане на видео. Това ще се промени с пускането на Internet Explorer 9 (вероятно в началото на следващата година), когато ще се поддържа H.264, заедно с много други екстри от HTML5.

В случай, че се чудите как, можете да конвертирате вашите видео файлове в OGG (можете да прочетете повече за типа Theora OGG в TheoraCookbook ) файлове с помощта на Miro Video Converter .

За допълнителна задълбочена информация за видео елемента и кодеците отидете на гмуркане в html5: видео в мрежата от Марк Пилигрим.

HTML5 код

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

Елементът

Видео елементът може да има следните атрибути:

Атрибут	Описание
src	валиден URL адрес на самия видео файл
автоматично изпълнение	булева стойност, показваща дали видеоклипът трябва да се възпроизвежда автоматично
контроли	булева стойност, указваща, че браузърът трябва да показва медийните контроли по подразбиране
цикъл	булева стойност, показваща дали видеоклипът трябва да се възпроизвежда многократно
предварително зареждане	показва на браузъра дали се изисква превантивно изтегляне на самото видео или само метаданните са необходими. Възможните стойности са: none - показва, че видеото не трябва да бъде предварително заредено (тъй като вероятно няма да се изисква) метаданни - видеоклипът вероятно няма да е необходим, но е метаданни (напр. размери, продължителност) е желателно автоматично - информира браузъра за опит за изтегляне на цялото видео (празен низ) - означава същото като автоматично
постер	URL адресът на файл с изображение, който да се показва, когато няма налични видео данни
ширина	ширината на видеото, в CSS пиксели
височина	височината на видеото, в CSS пиксели

От това се вижда колко лесно е да вградите OGG видео във вашия уебсайт само с помощта на видеоелемента:

Това наистина е всичко.

Всеки браузър, който поддържа формата Theora OGG, сега трябва успешно да показва и възпроизвежда вашето видео без допълнителни шумове. Разбира се, това не е толкова лесно, тъй като както видяхме от таблицата по-горе, кодът ще работи само във Firefox, Chrome и Opera. Така че трябва да имаме и резервен вариант към H.264. Това може да се постигне с помощта на елемент, който ни позволява да дефинираме множество медийни източници за видео елемента.

как да стартирам ios приложения на компютър

Елементът

Изходният елемент има следните атрибути:

Атрибут	Описание
src	валиден URL адрес на самия медиен файл (в случая видео)
Тип	вида на медийния файл, който трябва да бъде MIME тип , напр. `type='video/ogg'` показва, че това е видео на Theora OGG и можете също да предоставите кодека MIME, за да помогнете на браузъра да реши как да възпроизведе видеото, като използвате `type='video/ogg; codecs='theora, vorbis'`
половината	дава предвидения тип медия на медийния ресурс и трябва да е валиден медийна заявка , напр. `media='handheld'` показва, че видеоклипът е подходящ за преносими устройства или `media='all and (min-device-height:720px)'` което показва, че видеото е подходящо за екрани с 720 пиксела или повече.

Забележка: че изходният елемент е void и има начален таг, но няма затварящ таг

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

Използване и заедно

За да подреждаме видеоклипове в различните типове във видеоелемента, ние въвеждаме кода, както следва:

Your browser does not support the video element.

Горният код вече ще работи във всички браузъри, с изключение на Internet Explorer, който ще показва съобщението, посочено по-горе.

Можете да тествате това сами, като прегледате страницата за тестване на HTML5, която съдържа примерен видеоклип на пеперуда във формат Theora OGG и MP4, така че ако гледате това във Firefox, Chrome, Safari, Opera или на iPhone или Android телефон, трябва да можете да го видите.

Острите ножове сред вас сега ще забележат, че можем да се възползваме от това подреждане и да имаме резервен вариант към Flash (или някой друг плъгин) отдолу, вместо да показваме съжаление, че не можете да видите това видео съобщение, като използвате следния код :