Esimeses oma ajaveebis PC Pro , veebiarendaja Ian Devlin näitab, kuidas HTML5-ga videot oma veebisaidile kinnistada
ebakõla, kuidas häälekanalist lahkuda
Tõenäoliselt on HTML5 suurim ja enim räägitud funktsioon manustatud video. Praegu on ainsaks videosisu veebisaidile lisamise viisiks kolmanda osapoole pistikprogramm, näiteks Flash, QuickTime või RealPlayer. Koos HTML5 ja videoelemendi muutumisega see kõik muutub, kuna videotuge haldab veebibrauser, kaotades vajaduse mis tahes kolmanda osapoole toe järele.
HTML5-i tuge pakuvad juba mitmed veebibrauserid. Siin paljastame, kuidas saate pistikprogrammivaba videot oma saidile kinnistada ja millised probleemid teil silmitsi seisavad.
Failitüübid ja brauseri ühilduvus
Alustuseks vaatame lühidalt erinevaid videofailide tüüpe, mida HTML5 toetab. Need on Theora OGG ja H.264 (.mp4). Erinevad brauserid toetavad erinevat tüüpi ja mõned mitte ühtegi. Järgmine tabel näitab seda:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Ooper 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Kodekid ja muud tehnilised probleemid
HTML5 ise ei määra videokoodekit, mida kasutada, ja see on põhjustanud argumente selle kohta, milline on parim veebi jaoks kasutada . Nii et kõigi brauserite katmiseks peame toetama mõlemat koodekit.
Ja muidugi on seal Internet Explorer. Praegu ei toeta ükski Internet Exploreri välja antud versioonidest videoelementi ja video esitamiseks on endiselt vaja pistikprogrammi. See muutub Internet Explorer 9 väljaandmisega (tõenäoliselt järgmise aasta alguses), kui toetatakse H.264 koos paljude teiste HTML5 maiuspaladega.
Kui te ei tea, kuidas saate oma videofailid teisendada OGG-ks (saate Theora OGG tüübi kohta lisateavet lugeda TheoraCookbook ) faile kasutades Miro Video Converter .
Videoelemendi ja koodekite kohta põhjalikuma teabe saamiseks minge lehele sukeldu HTML5-sse: video veebis autor Mark Pilgrim.
HTML5 kood
Nüüd liigume tegeliku HTML5-koodi juurde ja kuidas saaksime asja tööle panna. HTML5 pakub meile kahte uut elementi, mida saame video lisamiseks oma veebilehtedele kasutada: element, mida oleme juba maininud, ja element. Vaatame neid kõiki kordamööda.
Element
Videoelemendil võivad olla järgmised atribuudid:
| Atribuut | Kirjeldus |
|---|---|
| src | videofaili enda kehtiv URL |
| automaatne esitamine | tõeväärtus, mis näitab, kas videot tuleks automaatselt esitada |
| juhtelemendid | tõeväärtus, mis näitab, et brauser peaks kuvama vaikimisi meediumikontrolli |
| silmus | tõeväärtus, mis näitab, kas videot tuleks korduvalt esitada |
| eellaadimine | näitab brauserile, kas video enda eellaadimine on vajalik või on vaja ainult metaandmeid. Võimalikud väärtused on:
|
| plakat | pildifaili URL, mis kuvatakse siis, kui videoandmeid pole saadaval |
| laius | video laius CSS-pikslites |
| kõrgus | video kõrgus CSS-pikslites |
Siit on näha, kui lihtne on OGG-video oma veebisaidile manustada, kasutades ainult videoelementi:
See on tegelikult kõik.
Iga brauser, mis toetab Theora OGG-vormingut, peaks nüüd teie videot ilma pikema jututa edukalt kuvama ja esitama. Muidugi pole see nii lihtne kui see, sest nagu nägime ülaltoodud tabelist, töötaks kood ainult Firefoxis, Chrome'is ja Operas. Nii et meil peab olema varukoopia ka H.264-le. Selle saab saavutada abil element, mis võimaldab meil videoelemendi jaoks määratleda mitu meediaallikat.
mis on liivakella emotikon Snapchatis
Element
Lähteelemendil on järgmised atribuudid:
| Atribuut | Kirjeldus |
|---|---|
| src | meediafaili (antud juhul video) enda kehtiv URL |
| tüüp | meediumifaili tüüp, mis peab olema a MIME tüüp , nt. type='video/ogg' näitab, et see on Theora OGG video, ja saate pakkuda ka MIME koodeki, mis aitab brauseril otsustada, kuidas videot esitada type='video/ogg; codecs='theora, vorbis' abil. |
| pool | annab meediumiressursi kavandatud meediumitüübi ja peab olema kehtiv meediumipäring , nt. media='handheld' näitab, et video sobib pihuseadmetele või media='all and (min-device-height:720px)' mis näitab, et video sobib ekraanidele, mille suurus on 720 pikslit või rohkem. |
Märkus. Lähteelement on tühine ja sellel on algusmärgend, kuid sulgemismärgend puudub
Lähteelemendi puhul on kõige kasulikum see, et saame seda kasutada erinevate failitüüpide virnastamiseks, võimaldades brauseril neid kordamööda proovida, kuni leiab ühe, mida ta saab mängida.
Kasutamine ja koos
Videoelementide eri tüüpi videote virnastamiseks sisestame koodi järgmiselt:
Your browser does not support the video element.
Ülaltoodud kood töötab nüüd kõigis brauserites, välja arvatud Internet Explorer, kus kuvatakse ülaltoodud teade.
Seda saate ise testida, vaadates HTML5 testvideo lehte, mis sisaldab liblika näidisvideot nii Theora OGG kui MP4 vormingus, nii et kui vaatate seda Firefoxis, Chrome'is, Safaris, Opera või iPhone'is või Android-telefonitoruga peaksite seda saama vaadata.
Teie seas olevad teravad noad märkasid nüüd, et saame seda virnastamist ära kasutada ja allosas on varukoopia Flashile (või mõnele muule pistikprogrammile), selle asemel, et kuvada kahetsust, et te ei näe seda videosõnumit, kasutades järgmist koodi :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Järeldus
Nagu enamiku HTML5-elementide puhul, on ka lähte- ja videoelementide brauseri tugi praegu lünklik. Praegu on käimas ka suur arutelu selle üle, kas lähteelement hävitab Flashi kasutamise kui kõige populaarsema meetodi videosisu lisamiseks veebisaitidele. Ma pole kindel, et see tapab Flashi täielikult, kuid sellegipoolest arvan, et on õiglane öelda, et see on siin selleks, et jääda ja pakub veebiarendajatele puhtamat ja lihtsamat lähenemisviisi video kinnistamiseks.
