Pirmajame savo tinklaraštyje, skirtame „PC Pro“ , interneto kūrėjas Ianas Devlinas atskleidžia, kaip įterpti vaizdo įrašą į savo svetainę naudojant HTML5
„Windows 10“ atminties valdymo klaidos taisymas
Tikriausiai didžiausia ir labiausiai kalbama HTML5 ypatybė yra įterptasis vaizdo įrašas. Šiuo metu vienintelis būdas pridėti vaizdo įrašo turinį į savo svetainę yra naudojant trečiosios šalies papildinį, pvz., „Flash“, „QuickTime“ ar „RealPlayer“. Išaušus HTML5 ir vaizdo elementui, viskas pasikeis, o vaizdo įrašų palaikymą tvarkys žiniatinklio naršyklė, panaikindama bet kokios trečiosios šalies palaikymo poreikį.
Kelios žiniatinklio naršyklės jau siūlo HTML5 palaikymą. Čia mes atskleisime, kaip galite įterpti vaizdo įrašą be papildinių į savo svetainę ir problemas, su kuriomis susidursite.
Failų tipai ir naršyklės suderinamumas
Pirmiausia trumpai apžvelgsime įvairius vaizdo įrašų failų tipus, palaikomus HTML5. Tai „Theora OGG“ ir „H.264“ (.mp4). Skirtingos naršyklės palaiko skirtingus tipus, o kai kurios - nė vieno. Ši lentelė rodo tai:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| „Firefox 3.5“ ir naujesnės versijos | ✓ | x |
| „Chrome 3+“ | ✓ | ✓ |
| „Safari 3+“ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| „Internet Explorer 8“ | x | x |
| „Internet Explorer 9“ | x | ✓ |
| „iPhone“ | x | ✓ |
| „Android“ | x | ✓ |
Kodekai ir kiti techniniai klausimai
Pats HTML5 nenurodo naudojamo vaizdo kodeko, todėl kilo ginčų, kuris yra geriausia naudoti žiniatinklyje . Taigi, norėdami aprėpti visas naršykles, turime palaikyti abu kodekus.
Ir tada, žinoma, yra „Internet Explorer“. Šiuo metu nė viena iš išleistų „Internet Explorer“ versijų nepalaiko vaizdo elemento, o norint paleisti vaizdo įrašą vis tiek reikalingas papildinys. Tai pasikeis išleidus „Internet Explorer 9“ (greičiausiai kitų metų pradžioje), kai bus palaikomas H.264, kartu su daugeliu kitų HTML5 gėrybių.
Jei jums įdomu, kaip galite konvertuoti savo vaizdo failus į OGG (daugiau apie „Theora OGG“ tipą galite perskaityti „TheoraCookbook“ ) failus naudojant „Miro“ vaizdo keitiklis .
Norėdami gauti išsamesnės informacijos apie vaizdo elementą ir kodekus, eikite į nerti į HTML5: vaizdo įrašą internete autorius Markas Piligrimas.
HTML5 kodas
Dabar pereiname prie tikrojo HTML5 kodo ir kaip mes galime pasiekti, kad viskas veiktų. HTML5 pateikia du naujus elementus, kuriuos galime naudoti norėdami pridėti vaizdo įrašą į savo tinklalapius: elementą, kurį jau minėjome, ir elementas. Pažvelkime į kiekvieną iš jų paeiliui.
Elementas
Vaizdo įrašo elementas gali turėti šiuos atributus:
| Atributas | apibūdinimas |
|---|---|
| src | galiojantį vaizdo įrašo failo URL |
| automatinis paleidimas | loginė reikšmė, nurodanti, ar vaizdo įrašas turėtų būti leidžiamas automatiškai |
| valdikliai | loginė reikšmė, nurodanti, kad numatytuosius laikmenų valdiklius turėtų rodyti naršyklė |
| kilpa | loginė reikšmė, nurodanti, ar vaizdo įrašą reikia leisti pakartotinai |
| išankstinė apkrova | nurodo naršyklei, ar reikia išankstinio vaizdo įrašo atsisiuntimo, ar reikia tik metaduomenų. Galimos vertės yra:
|
| plakatas | vaizdo failo URL, kuris bus rodomas, kai nėra vaizdo įrašo duomenų |
| plotis | vaizdo įrašo pločio CSS pikseliais |
| ūgio | vaizdo įrašo aukštis CSS pikseliais |
Iš to matyti, kaip lengva įterpti OGG vaizdo įrašą į savo svetainę naudojant vien vaizdo elementą:
Tai iš tikrųjų viskas.
Bet kokia naršyklė, palaikanti „Theora OGG“ formatą, dabar turėtų sėkmingai rodyti ir paleisti jūsų vaizdo įrašą. Žinoma, tai nėra taip lengva, nes, kaip matėme iš aukščiau pateiktos lentelės, kodas veiktų tik „Firefox“, „Chrome“ ir „Opera“. Taigi mes turime turėti atsarginę versiją ir H.264. Tai galima pasiekti naudojant elementą, kuris leidžia mums apibrėžti kelis vaizdo elemento laikmenos šaltinius.
kaip peradresuoti skambučius iš „Google Voice“
Elementas
Šaltinio elementas turi šiuos atributus:
| Atributas | apibūdinimas |
|---|---|
| src | galiojantį patį laikmenos (šiuo atveju vaizdo įrašo) failo URL |
| tipo | medijos failo, kuris turi būti a MIME tipas , pvz. type='video/ogg' rodo, kad tai „Theora OGG“ vaizdo įrašas, taip pat galite pateikti MIME kodeką, kuris padės naršyklei nuspręsti, kaip paleisti vaizdo įrašą naudojant type='video/ogg; codecs='theora, vorbis' |
| pusė | pateikia numatytą medijos šaltinio tipą ir turi būti galiojantis medijos užklausa , pvz. media='handheld' rodo, kad vaizdo įrašas tinka delniniams įrenginiams arba media='all and (min-device-height:720px)' tai rodo, kad vaizdo įrašas tinka 720 pikselių ar didesniems ekranams. |
Pastaba: šaltinio elementas yra negaliojantis ir turi pradinę žymą, bet neturi baigiamosios žymos
Naudingiausias šaltinio elemento dalykas yra tas, kad mes galime jį naudoti sukrauti skirtingus failų tipus, leisdami naršyklei išbandyti kiekvieną iš eilės, kol ras tą, kurį gali atkurti.
Naudojant ir kartu
Norėdami kaupti skirtingų tipų vaizdo įrašus vaizdo įrašo elemente, įveskite kodą taip:
Your browser does not support the video element.
Pirmiau nurodytas kodas dabar veiks visose naršyklėse, išskyrus „Internet Explorer“, kuriame bus rodomas aukščiau nurodytas pranešimas.
Tai galite išbandyti patys, peržiūrėdami HTML5 bandomojo vaizdo įrašo puslapį, kuriame yra „Theora OGG“ ir „MP4“ formato drugelio vaizdo pavyzdys, taigi, jei tai žiūrite „Firefox“, „Chrome“, „Safari“, „Opera“ arba „iPhone“ ar „Android“ ragelį, turėtumėte jį peržiūrėti.
Aštrūs peiliai tarp jūsų dabar pastebėsite, kad mes galime pasinaudoti šia kaupimo pranašumais ir turėti atsarginę „Flash“ (ar kokio kito papildinio) versiją apačioje, užuot rodę apgailestavimą, kad nematote šio vaizdo pranešimo, naudodami šį kodą :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Išvada
Kaip ir daugumai HTML5 elementų, naršyklės šaltinio ir vaizdo elementų palaikymas šiuo metu yra nevienodas. Šiuo metu taip pat vyksta didžiulės diskusijos, ar šaltinio elementas užmuš „Flash“ naudojimą kaip populiariausią vaizdo įrašų turinio įtraukimo į svetaines metodą. Nesu tikras, ar tai visiškai užmuš „Flash“, bet vis dėlto manau, kad teisinga sakyti, jog čia yra likti, ir suteiks interneto kūrėjams švaresnį ir paprastesnį požiūrį į vaizdo įrašo įdėjimą.
