Ieskats HTML5 video lauciņā

Ieskats HTML5 video lauciņā Jānis Rubļevskis (koko) / 23.10.2014. 10:42 / #Datori / 3 komentāri

Pēdējā laikā arvien biežāk nepieciešams izmantot html5 video. Galvenokārt tas ir nepieciešams, lai varētu ar JavaScript tos apstrādāt un vadīt. Protams, var izmantot YouTube un YouTube JavaScript API, taču reizēm jābūt pilnīgi neatkarīgam. Tad nu neliels domu apkopojums.

Formāti

Ja grib, lai HTML5 video atbalstošie browseri spēlētu video, pilnīgi visiem vajag arī sagatavot sava formāta materiālu. Teorijā ir tā, ka pietiek ar mp4 (H.264) un pilnai laimei klāt jāpaķer vai nu webm vai arī ogg, bet esmu sapratis, ka labāk barot visus trīs (pēdējais miniprojekts tieši tāpēc man aizņēma 2BG).

Saprotama lieta, ka mp4 piegādās video ražotājs (cerams), bet nereti ir piemirsts par pārējiem formātiem - tad nu lūdzu ffmpeg rindiņas, kas pārkodēs, nezaudējot (teorētiski) video kvalitāti:
mp4 uz webm:
ffmpeg -i video.mp4 -acodec libvorbis -aq 5 -ac 2 -qmax 25 -threads 2 video.webm
mp4 uz ogg:
ffmpeg -i video.mp4 -c:v libtheora -c:a libvorbis -q:v 6 -q:a 5 video.ogg

JavaSkripts

Super daudz šajā lietā neiedziļināšos, jo ir pilna pasaule ar pamācībām, bet nu pāris lietas, kuras jāņem vērā, ja izstrādā tieši aplikācijas un vajag būt drošam par video ielādi:

javaskripta bloku ar video apstrādi jāliek pēc video taga, citādi uz dažiem browseriem sākas brīnumi ar eventu izsaukšanu;
ar javaskriptu nav iespējams priekšielādēt video (fakin smieklīgs vārds - preload), jo html5 video tiek uztverti kā datu straumes (stream) (patiesībā es tos tā uztveru - neesmu pētījis - pasarg D, nesadirst!), tāpēc tiek ielādētas porcijas un, pirms nav sākts spēlēt video, tālāk nemaz neielādēs. Var, protams spēlēties ar video parādīšanu kaut kur neredzamā zonā ar izslēgtu skaņu, bet tad preloads vilksies tik pat ilgi, cik garš ir video;
maģiskais canplaythroug, kas teorētiski tiek izsaukts tad, kad (pie esošā interneta ātruma) video varēs nospēlēt bez loading iebremzes, uz dažādiem browseriem strādā neviennozīmīgi, tāpēc uz to paļauties nav ieteicams, piemēram, chrome to pasauc uzreiz pēc canplay eventa, kad preload nemaz nav sācies. Šo fīču pareizi esot iestrādājuši pagaidām tikai (un te mēs apsēžamies no pārsteiguma) MS Explorer un Firefox izstrādātāji.
progress events ir vienīgā lieta, pēc kuras var noteikt, ka kaut kas sāk darboties, bet te arī jābūt ļoti uzmanīgam. Ja <video> tegam pieliks parametru preload="metadata", kas paredz iegūt tikai video metadatus par tā garumu utt, tad šajā gadījumā vienalga huligānu notēlo Chrome, kas izsauc gan progres, gan canplay, gan canplaytrough eventus. Firefox, piemēram, neizsauks nevienu no šiem, kamēr nebūs palaists video.play(). Līdz ar to silti iesaku gadījumos, kad grib uztaisīt kaut kādu pseido preloadu un paļauties uz callbackiem, tomēr izmantot preload="auto" parametru;

Kas attiecas pastarpināti uz JavaScript izmantošanu, tad atcerieties, ka ir gan mazohistiski cilvēki, gan arī sevišķi apdalītie, kuri nemāk un kuriem neviens nepalīdz atjaunot pārlūkprogrammas. Tad nu tādiem html5 video var arī nestrādāt. Es iesaku viņus atrast un palīdzēt ar pārlūkprogrammas atjaunošanu (ja vajag, tad vardarbīgā ceļā). Likumdošana gan tādu rīcību neatbalsta, tāpēc otrs variants ir noteikt šādas vecas pārlūkprogrammas esamību un parādīt tām vidējo pirkstu. Pēdējā projektā izmantoju Modernizr, ar kuru var ļoti viegli noteikt pārlūka spējas (ne tikai saistītās ar video atrādīšanu). Piemēram, lai noteiktu pārlūka gatavību spēlēt video, var paprasīt if(Modernizr.video). Ja grib konkrētāk, tad if(Modernizr.video.webm).

Savu pieredzi varat izklāstīt komentāros. Ja es kaut ko uzrakstījis greizi vai neesmu izpētījis pareizi, tad arī to var pateikt - palabošu.