andew
2015-08-10T19:23:37+00:00
2016-02-28T17:11:05+00:00
11937
Artiklis kirjeldatakse HTML5 heli- ja videokonteinerite struktuuri, video, heli, allika, raja silte ja nende atribuute koos võimalike väärtustega. Antakse HTML-malle ja näiteid multimeediumifailide taasesituse rakendamisest, mis põhinevad brauseris sisseehitatud võimalustel. Kuvatakse ühendus subtiitrite, pealkirjade, sisukorra tekstiraja videoga, kasutades WEBVTT-vormingus faile koos näidetega. Esitas heli ja video jaoks schema.org märgistusega HTML5 koodimalle. Näidatud on peamised veebiheli- ja videofailivormingud koos nende MIME-tüüpidega ning tööriistad video ja heli nendesse vormingutesse teisendamiseks.
IN HTML5 on uusi funktsioone, mis võimaldavad teil esitada heli- ja videofaile otse brauseris ilma kolmandate osapoolte programme kasutamata. Seni vaatamata sellele HTML5 pole enam uus, on endiselt lahkarvamusi selles, kuidas brauserid silte käsitlevad video Ja heli ja kuidas mängijat ennast kuvatakse. Mõni teeb seda iga uue versiooniga paremini, teine jääb ikka maha. Ülemaailmselt on trend, et brauserid pakuvad üha rohkem funktsioone multimeediumifailide esitamiseks.
Ekraanisaade: näide mallide kasutamisest
Laadige video alla
Ekraanisaade: mallide kasutamise näited artiklist - veebisait
HTML5 video ja heli on arenev standard ja seda ei seostata ühegi heli- või videovorminguga, seega on brauserite toetamise osas erinevusi formaadid heli- ja videofailid. Seda erinevust kompenseerib nüüd originaalfaili kodeerimine mitme erineva koodekiga ja kõigi nende failide versioonide ühendamine siltidega või pesastatud siltide kaudu < allikassrc="URL">. Brauserite toetatud heli- ja videofailide vormingute hulgas on aga esile kerkimas liidrid. Video puhul on see loomulikult formaat mp4 (H.264) ja heli jaoks on see vorming mp3 Ja m4a. Nüüd on tõenäoliselt kõik brauserid võimelised esitama nendes vormingutes faile. Samamoodi brauserid Firefox, Chrome Ja Ooper nõustus toetama WEBM-i standardit ühise videovorminguna. Minu vaatevinklist hetkel parim kasutusjuht HTML5 video ja heli on skeem, mis põhineb ühe vormingus multimeediumifaili kasutamisel mp4(H.264) video ja m4a heli jaoks ja JS HTML5 mängija. Heli- või videomahutiga on ühendatud ainult üks määratud vormingus fail. Nüüd on enamik brausereid võimelised esitama mp4-vormingus. Ühendatud JS-i teek kujundab brauserisse sisseehitatud pleieri stiili. Kui brauser vormingut ei toeta mp4/m4a, See JS sel juhul ühendab mängija multimeediumifaili esitamiseks Flash-mängija. Arvestades, et mp4-vorming on muutunud väga populaarseks, võime loota, et selle taasesitusega brauserites on probleeme väikese tõenäosusega. See skeem nõuab ainult ühte määratud vormingus meediumifaili, mis säästab kettaruumi ja failitöötlusressursse. Samuti on selline skeem strateegiliselt õigem, kuna suundumus on, et brausereid rakendatakse rohkem ja paremini HTML5 video ja heli.
Esitatava faili HTML5-mängija määramiseks peate lisaks faili URL-ile edastama ja MIME failitüüp, et brauser mõistaks, millist kodekit ta peab kasutama. Allolevas tabelis on loetletud levinumad failivormingud ja nende vormingud MIME tüübid.
Failivormingud ja nende MIME-tüübid
| Meediumifailid | Laiendused | miimi tüüp |
|---|---|---|
| heli mp3 | mp3 | heli/mpeg |
| Heli mp4 | m4a | heli/mp4 |
| heli webm | webm | audio/webm |
| heli ogg | ogg | heli/ogg |
| Video mp4 (H.264) | mp4 | video/mp4 |
| Videod webm | webm | video/webm |
| Videod ogg | ogv | video/ogg |
Tööriistad heli- ja videofailide kodeerimiseks
Video- ja helifailide kodeerimiseks ülaltoodud veebivormingutesse saate kasutada avatud lähtekoodiga programmi, mis toetab heli- ja videofailide teisendamist peamistesse veebivormingutesse ( MP4, WebM, Ogg Theora, MP3 ja nii edasi.). Miro videomuundur saadaval erinevate operatsioonisüsteemide jaoks - Windows, Mac Ja Linux ja on graafiline kest konsooli utiliitidele ja mida on mugav kasutada veebiserveris, et töödelda allalaaditud videot ja heli automaatrežiimis.
HTML5-heli näidiskood koos schema.org-i märgistusega:
Heli pealkiri
Nii näevad välja ülalkirjeldatud helimalli koodist eraldatud märgistusandmed.
Audioobject itemType = http://schema.org/AudioObject name = Heli pealkirja kirjeldus = Heli kirjeldus... isfamilyfriendly = tõene kodeeringuvorming = mp3 kestus = PT04M59S üleslaadimiskuupäev = 2015-12-31 image = Täielik URL pildile.jpg alternatiivne nimi = alternatiiv heli pealkiri contenturl href = URL failile.mp3 text = Laadi alla heli autori isiku üksuse tüüp = http://schema.org/Person url href = URL text = Autori nimi = Autori nimi pilt = Täielik url isikule.jpg
Minimaalne helimärgistus schema.org peaks sisaldama itemprop="nimi" , itemprop="kirjeldus" , itemprop="contentUrl" . Ülejäänud omadused on valikulised.
Näide HTML5 märgendi tavapärasest kasutamisest
Demos taotlesin silti atribuudi kaudu klass css stiilid, mis muudavad videoala laiuse olenevalt ekraani suurusest dünaamiliseks. Mängija kõrgus reguleeritakse ise. Proovige muuta oma brauseriakna suurust, et näha, kuidas see töötab. Seetõttu pole selle demo koodi allikas atribuute laius Ja kõrgus sildi jaoks , need asendatakse css stiilid. Kuid malli koodiloendis seda aktsepteerimist ei kuvata, kuna on juba privaatne.
HTML5-video näidiskood koos schema.org-i mikromärgistusega:
Video pealkiri
Vaadake YouTube'is
Nii näevad välja ülalkirjeldatud videomalli koodist eraldatud mikroandmete andmed.
Videoobject itemType = http://schema.org/VideoObject name = Video pealkirja pisipilt imageobject itemType = http://schema.org/ImageObject contenturl = URL video-thumbnail.jpg|png laius = 100 kõrgus = 100 kestus = PT14M59S peresõbralik = tõene üleslaadimiskuupäev = 2015-12-31 kirjeldus = Video lühikirjeldus... url href = URL failile.mp4 text = Video pealkiri autor isik itemType = http://schema.org/Person url href = URL autori veebi lehe tekst = autori nimi = autori nimi pilt = Autori täielik URL.jpg pisipildi URL = faili URL.jpg|png
Minimaalne vajalik otsingumootorite jaoks video märgistus schema.org peab sisaldama kõiki näidiskoodis näidatud atribuute itemprop välja arvatud plokk itemprop="autor" , mis on otsingumootoritele valikuline ja selle saab eemaldada, kui selle täitmiseks pole andmeid. Sest video pisipilt Yandex nõuab mikroandmete täpsustamist vastavalt schema.org Kuidas itemprop="pisipilt" as ImageObject, A Google nõuab, et täpsustaksite, kuidas itemprop="thumbnailUrl" , nii et peate kleepima video pisipilt faili kaks korda ja nii ka teine silt img sai stiili ekraan: puudub, mida brauseris ei kuvata. Kasutamise asemel võib img märgistage kuva: puudub edastage see vara sildiga link atribuudi kaudu href. Samuti hoolimata sellest, et mikroandmeid saab edastada metasiltide kaudu, mida kasutajale ei näidata ja link, on siiski soovitatav võimalusel lisada mikromärgistus peamiselt siltidele, mida kasutajale kuvatakse. Mikromärgistuse valideerimine schema.org saab teha nendel linkidel:,. Mikroandmete kasutamise peamine eelis on sellise sisu mugavus otsingurobotite ja sotsiaalvõrgustike robotite jaoks. Need robotid eraldavad märgistatud andmed ja koondavad need. Seetõttu paraneb mikroandmete kasutamine SEO saidil ja aitab kaasa andmete automaatsele levitamisele sotsiaalvõrgustikes. Schema.org-i mikroandmete üksikasjalik kirjeldus skeemiga märgitud videote jaoks VideoObject t kohapeal. Samuti väärib märkimist, et juhtudel, kui manustate oma saidile videot mitte otse, vaid videomajutusvidinate abil Yandex.Video või Youtube, siis saate vidina koodiploki alla lisada oma HTML-koodiploki koos video kirjeldusega ja manustada sinna mikromärgistuse Schema.org selle video jaoks. Samal ajal määrake URL-i parameetrina - linke videole - mitte otselinki staatilisele failile, vaid määrake videomajutusest saadud link. Kuigi Schema.org-i spetsifikatsioon ütleb, et link peaks viima otsefailile, töötlevad otsingumootorid ka linke videomajutusest ( vaadake näiteid Yandexi veebisaidi jaotises Veebihaldur), vaatamata sellele, et te ei saa faili selliselt lingilt alla laadida ja te ei saa seda otse lehel olevas HTML5-meediumipleieris vaadata, vaid ainult videomajutusvidinas.
Kui seisate silmitsi küsimusega, millisest hostist multimeediumi heli- ja videofaile üles laadida, vaadake artiklit, mis kirjeldab meediumifailide sisestamise võimalust Yandexi ketta veebilehele.
Atribuudid Ja sildid:
Atribuudid src, eellaadimine, automaatesitus, meediagrupp, silmus, vaigistatud, juhtnupud on kõigi meediumielementide, sealhulgas siltide, ühised atribuudid Ja .
