Pirmajos viņa emuāros par PC Pro , web izstrādātājs Īans Devlins atklāj, kā iegult video savā vietnē ar HTML5
kā instalēt mods Sims 4
Iespējams, ka lielākā un visvairāk apspriestā HTML5 iezīme ir iegultie video. Pašlaik vienīgā metode video satura pievienošanai vietnei ir ar trešās puses spraudni, piemēram, Flash, QuickTime vai RealPlayer. Sākoties HTML5 un video elementam, tas viss mainīsies, un video atbalstu pārvalda tīmekļa pārlūkprogramma, novēršot nepieciešamību pēc jebkura trešās puses atbalsta.
HTML5 atbalstu jau piedāvā vairākas tīmekļa pārlūkprogrammas. Šeit mēs atklāsim, kā savā vietnē varat ievietot video bez spraudņiem un problēmas, ar kurām jūs saskaraties.
Failu veidi un pārlūka saderība
Vispirms mēs īsi apskatīsim dažādus video failu veidus, kas tiek atbalstīti HTML5. Tie ir Theora OGG un H.264 (.mp4). Dažādas pārlūkprogrammas atbalsta dažādus veidus, un dažas atbalsta nevienu. Šajā tabulā tas norādīts:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Kodeki un citi tehniski jautājumi
HTML5 pats nenorāda izmantojamo video kodeku, un tas ir izraisījis argumentus par to, kurš ir vislabāk izmantot tīmeklim . Tātad, lai aptvertu visas pārlūkprogrammas, mums jāatbalsta abi kodeki.
Un, protams, ir arī Internet Explorer. Šobrīd neviena no izlaistajām Internet Explorer versijām neatbalsta video elementu, un video atskaņošanai joprojām ir nepieciešams spraudnis. Tas mainīsies, izlaižot Internet Explorer 9 (iespējams, nākamā gada sākumā), kad tiks atbalstīts H.264, kā arī daudzi citi HTML5 labumi.
Gadījumā, ja jūs domājat, kā jūs varat konvertēt savus video failus uz OGG (vairāk par Theora OGG tipu varat izlasīt vietnē Theora pavārgrāmata ) failus, izmantojot Miro video pārveidotājs .
Lai iegūtu sīkāku informāciju par video elementu un kodekiem, dodieties uz ienirt html5: video tīmeklī autors Marks Svētceļnieks.
HTML5 kods
Tagad mēs pārietam uz faktisko HTML5 kodu un to, kā panākt, lai lieta darbotos. HTML5 nodrošina mūs ar diviem jauniem elementiem, kurus mēs varam izmantot, lai pievienotu video mūsu tīmekļa lapām: elements, kuru mēs jau pieminējām, un elements. Apskatīsim katru no šiem pēc kārtas.
Elements
Video elementam var būt šādi atribūti:
| Atribūts | Apraksts |
|---|---|
| src | derīgs URL pašam video failam |
| automātiskā atskaņošana | Būla vērtība, kas norāda, vai video ir jāspēlē automātiski |
| vadīklas | būla vērtība, kas norāda, ka pārlūkprogrammai jāparāda noklusējuma multivides vadīklas |
| cilpa | Būla vērtība, kas norāda, vai videoklips ir jāatkārto atkārtoti |
| iepriekš ielādēt | norāda pārlūkprogrammai, vai ir nepieciešama iepriekšēja videoklipa lejupielāde vai ir nepieciešams tikai metadati. Iespējamās vērtības ir:
|
| plakāts | attēla faila URL, kas jāparāda, ja nav pieejami video dati |
| platums | video platums CSS pikseļos |
| augstums | videoklipa augstums CSS pikseļos |
No tā var redzēt, cik viegli ir iegult OGG video savā vietnē, izmantojot tikai video elementu:
Tas tiešām ir viss.
Jebkuram pārlūkam, kas atbalsta Theora OGG formātu, tagad bez liekas parādīšanās vajadzētu veiksmīgi parādīt un atskaņot jūsu videoklipu. Protams, tas nav tik vienkārši, jo tas, kā redzams no iepriekš redzamās tabulas, kods darbosies tikai Firefox, Chrome un Opera. Tāpēc mums ir jābūt arī H.264. To var panākt, izmantojot elements, kas ļauj mums definēt vairākus multivides avotus video elementam.
kā saglabāt citu cilvēku instagram video
Elements
Avota elementam ir šādi atribūti:
| Atribūts | Apraksts |
|---|---|
| src | derīgs URL uz pašu multivides (šajā gadījumā video) failu |
| tips | multivides faila tipam, kuram jābūt: a MIME tips , piem. type='video/ogg' norāda, ka tas ir Theora OGG video, un jūs varat arī nodrošināt MIME kodeku, lai palīdzētu pārlūkprogrammai izlemt, kā atskaņot videoklipu, izmantojot type='video/ogg; codecs='theora, vorbis' |
| puse | norāda paredzēto multivides resursa veidu un tam jābūt derīgam multivides vaicājums , piem. media='handheld' norāda, ka videoklips ir piemērots rokas ierīcēm vai media='all and (min-device-height:720px)' kas norāda, ka videoklips ir piemērots ekrāniem ar 720 pikseļiem vai vairāk. |
Piezīme: avota elements nav derīgs un tam ir sākuma tags, bet nav noslēguma taga
Visnoderīgākais avota elementā ir tas, ka mēs varam to izmantot dažādu failu tipu sakraušanai, ļaujot pārlūkprogrammai izmēģināt katru pēc kārtas, līdz atrod kādu, kuru var atskaņot.
Izmantojot un kopā
Lai video elementā sakrautu dažādus videoklipus, kods tiek ievadīts šādi:
Your browser does not support the video element.
Iepriekš minētais kods darbosies visās pārlūkprogrammās, izņemot Internet Explorer, kurā tiks parādīts iepriekš norādītais ziņojums.
To varat pārbaudīt pats, apskatot HTML5 testa video lapu, kurā ir tauriņa video paraugs gan Theora OGG, gan MP4 formātā, tādēļ, ja to skatāt Firefox, Chrome, Safari, Opera vai iPhone vai iPhone Android klausuli, jums vajadzētu to apskatīt.
Asie naži jūsu vidū tagad pamanīsit, ka mēs varam izmantot šīs sakrašanas priekšrocības un apakšdaļā ir rezerves Flash (vai kāds cits spraudnis), tā vietā, lai parādītu žēl, ka neredzat šo video ziņojumu, izmantojot šādu kodu :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Secinājums
Tāpat kā lielākajai daļai HTML5 elementu, arī pārlūka atbalsts avota un video elementiem pašlaik ir nevienmērīgs. Pašlaik notiek arī lielas debates par to, vai avota elements iznīcinās Flash izmantošanu kā vispopulārāko metodi video satura pievienošanai vietnēm. Es neesmu pārliecināts, ka tas pilnībā iznīcinās Flash, bet tomēr es uzskatu, ka ir taisnīgi teikt, ka tas ir šeit, lai paliktu, un nodrošinās tīmekļa izstrādātājiem tīrāku un vieglāku pieeju video iegulšanai.
