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

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

  • Adding Video Your Website With Html5

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



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

НОВО SonyHDRBack_Web-462x369НОВО SonyHDRBack_Web-462x369



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

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

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



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

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

Theora OGGH.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 (или някой друг плъгин) отдолу, вместо да показваме съжаление, че не можете да видите това видео съобщение, като използвате следния код :




data='flvplayer.swf?file=myVideo.flv&autoStart=true'>

'


Заключение

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

Интересни Статии

Избор На Редактора

FIFA 18 получава безплатен режим на Световната купа през май
FIFA 18 получава безплатен режим на Световната купа през май
Очаквате ли вече FIFA 19? Е, спри! Все още има живот във FIFA 18. Преди световното през 2018 г. в Русия EA обяви, че FIFA 18 ще получи чудовищна актуализация
Как да намерите името на вашия компютър от командния ред
Как да намерите името на вашия компютър от командния ред
Командният ред е мощен инструмент, който можете да използвате буквално за всичко на вашия компютър. Наред с други сложни процеси, Command Prompt ви позволява да създавате, премествате, изтривате файлове и да намирате цялата важна информация за вашия
Награди за ниво на Pokémon Go: Награда за всеки треньор и отключване на предмети, които можете да намерите в Pokémon Go
Награди за ниво на Pokémon Go: Награда за всеки треньор и отключване на предмети, които можете да намерите в Pokémon Go
Изравняването в Pokémon Go е от решаващо значение за улавянето на покемони с по-висока CP и за формирането на най-добрия отбор, който да свали конкурентни фитнес зали (отидете на Team Mystic!). Въпреки че е сравнително лесно да се спечелят точки за опит от люпене на яйца, улов
Как да нормализираме данните в Google Sheets?
Как да нормализираме данните в Google Sheets?
Ако работите с по-големи набори от данни в Google Sheets, сравняването на променливите стойности може да бъде досаден процес. За щастие нормализирането е статистически метод, който ще ви помогне да сортирате сложни стойности в лесни за сравнение набори от данни. тази статия
Edge Dev 81.0.416.3 разполага с PDF подобрения и нови инструменти
Edge Dev 81.0.416.3 разполага с PDF подобрения и нови инструменти
Microsoft пуска нова Dev компилация на Microsoft Edge Chromium. Edge Dev 81.0.416.3 е пуснат за Insiders с редица нови функции, които включват възможността за премахване на дублиращи се любими, възможност за подчертаване на текст в PDF файлове, поддръжка на оптимизирани за уеб PDF файлове и др. Ето какво е новото в Edge Dev 81.0.416.3 Добавени функции Добавено синьо
Как да активирам летенето в Minecraft
Как да активирам летенето в Minecraft
Опитните играчи на Minecraft знаят, че има няколко начина да летите във всеки режим. Но освен ако не знаете точните стъпки, летенето може да изглежда твърде сложно. Ако искате да знаете как да разрешите летенето в Minecraft, имаме
Как да изтрия всички контакти на iPhone [април 2020]
Как да изтрия всички контакти на iPhone [април 2020]
Когато превъртате контактите си и търсите един човек, с когото бихте искали да се свържете, може да бъдете претоварени от броя телефонни номера, имейли и имена на хора, с които вече не искате да общувате