HTML5 video 10 lietas, kas jāzina

HTML5 revolūcija ir aizraujoši web dizaineri no visām pasaules vietām. Jaunās specifikācijas atbalsta desmitiem elementu un atribūtu semantisko tīmekļa vietņu izveidei. Šīs jaunās funkcijas ietver multivides tagus audio un video formātiem.

Pēdējos gados Flash balstīta multivides atskaņotājs vairāk nekā pietiekams, lai straumētu tīmeklī, un šī tehnoloģija joprojām ir nepieciešama, lai atbalstītu mantotās pārlūkprogrammas. Bet par laimi mūsdienu standarti ir uzlabojušies, un HTML5 video iekļaušana atver durvis daudzām jaunām iespējām.

Šajā rokasgrāmatā es gribētu piedāvāt ievadu HTML5 videoklipam tīmeklī. Būs nepieciešamas dažas prakses, lai saprastu vietējo atskaņotāju un visu tā funkcionalitāti. Un labākais veids, kā iepazīties, ir vispirms niršana galvā!

1. Mediju veidi

Strādājot ar flash video atskaņotāju, tas ir pārāk bieži, lai visus video formātus saistītu .flv. Lai gan tas darbojas, lielākā daļa flv failu nevar saglabāt kvalitāti jebkur tuvākiem progresīvākajiem failu formātiem / kodekiem. Ir 3 svarīgi video veidi, kurus atbalsta HTML5: MP4, WebM un Ogg / Ogv. MPEG-4 faila tipu parasti kodē H.264, kas ļauj atskaņot trešās puses Flash atskaņotājus. Tas nozīmē, ka jums nav nepieciešams saglabāt .flv video kopiju, lai atbalstītu rezerves metodi! WebM un Ogg ir divi daudz jaunāki failu veidi, kas saistīti ar HTML5 video. Ogg izmanto Theora kodējumu, kura pamatā ir atvērtā koda standarta audio failu formāts. Tos var saglabāt ar .ogg vai .ogv paplašinājumu.

WebM ir projekts, ko izplata Google, kuru varat uzzināt vairāk WebM projekta tīmekļa vietnē. Formātu jau atbalsta Opera, Google Chrome, Firefox 4+ un pēdējā laikā Internet Explorer 9. Vairumam tīmekļa speciālistu tas vēl nav zināms, bet WebM ir vadošais video multivides formāts nākotnes tīmekļa video formātā.

2. Pārlūka atbalsts

Tātad, kādi no šiem failu tipiem ir nepieciešami jūsu vietnei? Labi ideāli, visi 3 būtu lieliski, jo tie nodrošina pilnu atbalsta spektru. Tomēr tas nav reāli, un patiesībā jūs varat aptvert visas bāzes tikai ar divām no tām. Šeit ir sadalījums par to, kas darbojas katrai pārlūkprogrammai:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - nav HTML5, tikai zibspuldzes!

Ja atceraties, agrāk es minēju, ka vairums flash video atskaņotāju atbalstīs MP4 failus, kamēr tie ir kodēti H.264. Katra no šīm pārlūkprogrammām būs iekļauts MP4 + Flash kā galīgais risinājums. Tas nozīmē, ka jums ir nepieciešams tikai izveidot divi dažādus video formātus, lai atbalstītu visas pārlūkprogrammas. MP4 Safari / IE9 un izvēle starp WebM vai Ogg pārējo.

Manuprāt, es ļoti iesaku pielīmēt WebM formātu. Tam ir daži lieli vārdi aiz projekta (proti, Google) un ir ieguvis daudz vilces HTML5 kopienā. Ogg / Ogv tiks atbalstīts, bet, visticamāk, zaudēs popularitāti WebM mazākiem failu izmēriem. Sean Golliher var lasīt saistītu darbu par video nākotni tīmeklī.

3. Vienkāršu HTML5 videoklipu iekļaušana

Tagad aplūkosim sintaksi, kas nepieciešama, lai iegultu kādu parauga kodu. Viss, kas mums nepieciešams, ir HTML5 video tag, lai norādītu uz katru filmas URL.

Ievērojiet kontroli un automātiskā atskaņošana atribūti nav jāiestata ar kādām vērtībām. Es arī iekļāvu a plakāts atribūts, kas pirms straumēšanas iepilda attēlu pār video atskaņotāju. Tas ir kopīgs priekšskatījums ar daudziem interneta atskaņotājiem.

Mēs piedāvājam gan MP4, gan WebM formātus video elementam. Ja nevienu no šiem nevar ielādēt, mēs parādīsim kļūdu, lai lietotājs varētu atjaunināt pārlūkprogrammu.

4. Piedāvājot „Flash Fallback”

Iepriekš minētais piemērs ir ideāls visiem standartiem atbilstošiem tīmekļa pārlūkiem. Tomēr mums ir arī jāapsver, ka pasaule ne vienmēr ir progresīvākā tehnoloģija. Mums ir jāatbalsta lietotāji vecākās Safari, Mozilla Firefox un īpaši Internet Explorer versijās.

Labākais veids, kā to panākt, ir Flash rezerves atskaņotājs. Tos var pievienot, izmantojot iegult vai objektu uz trešās puses .swf failu. JW Player un Flowplayer ir divi bezmaksas atvērtā koda risinājumi, kurus varat apsvērt. Bet arī pārbaudiet premium video atskaņotājus ActiveDen, kas var būt tikpat lēti kā $ 15 - $ 20.

Tagad pieņemsim nomainīt iepriekš minēto kodu, lai iekļautu rezerves atskaņotāju, lai atbalstītu gandrīz katru pārlūkprogrammu.

5. Mobilās ierīces atbalsts

Šis temats joprojām ir ļoti apspriests, jo mobilo sakaru nozare ir tik jauna. Apple iznāca ar MP4 atbalstu Mac un iOS ierīcēs. Tas nozīmē, ka jūs varat dabiski straumēt .mp4 video failus savā iPad, iPhone vai iPod Touch standarta video lietotāja interfeisā. Tas attiecas uz lielu tirgus daļu.

Nesen Android ierīcēm bija grūti nokļūt šajā pašā atbalsta līmenī. Tomēr Google beidzot ir pieņēmusi .mp4 tīmekļa straumēšanu, kas tagad izmanto gandrīz visus mobilo sakaru lietotājus. Un tā kā Flash šeit nav opcija, MP4 ir labākais risinājums. Tāpēc vispirms vēlaties iemiesot .mp4 kodu, lai iOS ierīces varētu nekavējoties atpazīt failu.

6. Safari lietotāja aģents

Viena kļūda, kas jāmin, ir viena no Flash spēlētāju un vietējās HTML5 .mp4 straumēšanas Safari. Tā kā pārlūks var atbalstīt abus failus, jums var būt grūti iegūt HTML5 video plūsmu Flash vietā. Tomēr, pateicoties šim lielajam TUAW emuāra ziņojumam, ir viegli mainīt pārlūka lietotāja aģentu.

Tas liks jūsu tīmekļa lapai atpazīt pārlūkprogrammu kā darbināšanu citā ierīcē. Visticamāk, jūs izvēlētos iPad, kas neatbalsta nevienu Flash atskaņošanu. Tas ir vienīgais svarīgākais jautājums, kas jums var rasties, testējot MP4 dzimtās un flash atskaņošanas metodes.

7. Pārvaldīt atskaņotāja vadīklas

Ticiet vai nē, ir arī metodes, ko varat izmantot, lai manipulētu ar HTML5 video atskaņotāja vadību. To var izdarīt JavaScript, izvelkot no atvērtām metodēm. Šeit ir pārāk daudz iespēju, lai tos uzskaitītu, bet mēģiniet izlaist caur W3C multivides elementu, lai iegūtu sīkāku informāciju.

Lai sniegtu jums vispārēju priekšstatu, Opera dev emuārs ir ievietojis dažas īsas konsultācijas, kas ir lieliskas jaunpienācējiem. Pat ja jūs nekad agrāk neesat iekļāvis JavaScript vai jQuery, tas joprojām ir vienkārši, lai sasniegtu šo laukumu. Varat piezvanīt uz konkrētiem video mediju atribūtiem, piemēram, izslēgts vai pašreizējais laiks. Tad jūs varat veikt darbības (apgaismot fonu, rādīt reklāmas), pamatojoties uz šiem kritērijiem, manipulējot ar DOM jQuery.

Tas pats attīstītājs operas rakstā sniedz darba scenāriju video atskaņotājam. Iespēja pielāgot savu lietotāja interfeisa kontroli ir izcila. Tas tikai iet, lai parādītu, cik spēcīgs HTML5 video kļūst.

8. Video formāta konvertēšana

Šī ir vēl viena liela problēma, kas, visticamāk, sajaukt mazāk tehniski gudras personas. Jūs vienkārši vēlaties saņemt savu tīmekļa vietni un straumēt, un tagad jums ir jārisina video konvertēšana? Nu tas tiešām nav tik grūti.

Lai risinātu MP4, kas ir jūsu lielākā prioritāte, varat izmantot HandBrake, kas ir bezmaksas atvērtā koda risinājums, kas darbojas visās 3 galvenajās operētājsistēmās. Tā atbalstīs H.264 kopā ar dažiem citiem kodekiem, kas padara šo labāko variantu freebie lietotājiem. Ja jums ir nauda, ​​lai izvilktu, man ir jāiesaka Xilisoft pārveidotājs, kas atrodas Mac App Store tikai par $ 40 mūža licenci.

Tas izskatās kā WebM maršruts padara dzīvi daudz vieglāku. Miro Video Converter ir bezmaksas rīks Windows un OS X, kas ražo lieliskas kvalitātes WebM failus. To var darīt arī Ogg Theora kodējumā, kas iznāk ar diezgan lielisku kvalitāti.

9. Tīmekļa atskaņotāja izveide

Video formāti ar HTML5 specifikācijām joprojām ir jauni izstrādātājiem. Ir atvērti protokoli, kas tikai gaida, lai tiktu atskaņoti, lai ļautu pielāgotus vadīklus, slīdņus, atskaņošanas / pauzes ikonas utt. Ja jūtaties treknrakstā, pārbaudiet šo pamācību par to, kā izveidot savu HTML5 atskaņotāju (publicēts Splashnology).

Kods ir mazliet intensīvs jaunpienācējiem, jo ​​tas prasa progresīvu CSS mērķauditorijas atlasi un mazliet formālu jQuery. Ir arī citi ietvari, uz kuriem jūs varēsiet balstīties uz pielāgotu spēlētāja dizainu. Līdzīgi šī slaidrādes prezentācija ir lielisks ievads HTML5 video atskaņotāja veidošanai.

HTML5 video atskaņotāja izveide

10. VideoJS bibliotēka

VideoJS, iespējams, ir iecienītākais HTML5 video atskaņotāju risinājums. Viss, kas Jums nepieciešams, ir viņu pašu izvietotā JavaScript un CSS stila lapa, kas iekļauta kaut kur jūsu dokumentā. Pēc tam uzrakstiet standarta HTML5 video kodu ar dažām papildu klasēm ādas novilkšanai. Tālāk pievienoju savu parauga kodu:

Ja notiks WordPress blogs, varat arī izmēģināt savu pielāgoto WP spraudni. Tajā automātiski tiks iekļauta bibliotēka js / css lapās, kurās tiek rādīts HTML5 video. Un to varat izdarīt jebkurā postenī vai lapas redaktorā, izmantojot īsceļus (skatiet šeit).

Secinājums

Es ceru, ka šī ievada rokasgrāmata var sajaukt jūsu interesi par tīmekļa video nākotni. Ar vairākiem lietotājiem, kas pievēršas mobilajam tālrunim, ir svarīgi, lai HTML tipu standarti tiktu pieņemti šāda veida plašsaziņas līdzekļiem. Tīmeklim jābūt vienkāršākam, lai izstrādātāji varētu ātrāk sagatavot pilnībā atbalstītus risinājumus. Mēs labprāt dzirdam jūsu idejas un ieteikumus par HTML5 video nākotni. Ja vēlaties koplietot, lūdzu, atstājiet komentāru tālāk norādītajā diskusiju zonā.