HTML5 video tags atvieglo videoklipa pievienošanu savam Web lapas. Lai gan virspusē tas šķiet viegli, ir daudz lietu, kas jums jādara, lai videoklips tiktu palaists un palaists. Šī apmācība palīdzēs jums veikt lapas izveidi HTML5, kas darbosies video visās mūsdienu pārlūkprogrammās.
- Savu HTML5 video mitināšana vs. Izmantojot YouTube
- Ātrs video atbalsta pārskats tīmeklī
- Izveidojiet un rediģējiet videoklipu
- Konvertējiet video uz Ogg Firefox
- Konvertējiet video uz MP4 Safari un Internet Explorer
- Pievienojiet video elementu savai tīmekļa lapai
- Pievienojiet JavaScript atskaņotāju, lai Internet Explorer darbotos
- Pārbaudiet pēc iespējas vairāk pārlūkprogrammu
01
gada 07
Savu HTML 5 video mitināšana vs. Izmantojot YouTube
YouTube ir lieliska vietne. Tas atvieglo video iegulšanu Web lapas ātri, un ar dažiem nelieliem izņēmumiem šo videoklipu izpilde ir diezgan nevainojama. Ja ievietojat videoklipu vietnē YouTube, varat būt diezgan pārliecināts, ka ikviens varēs to noskatīties.
Bet YouTube izmantošanai videoklipu iegulšanai ir daži trūkumi
Lielākā daļa problēmu ar YouTube ir patērētāja, nevis dizainera pusē, piemēram:
- Lēna meklēšana un indeksēšana
- Serveru darbības pārtraukumi
- Saturs tiek noņemts (šķietami) patvaļīgi
- Pārāk daudz slikta satura
Bet ir daži iemesli, kāpēc YouTube ir slikts arī satura izstrādātājiem, tostarp:
- Videoklipu maksimālais ilgums 10 minūtes (bezmaksas kontiem)
- Slikta augšupielādes veiktspēja
- YouTube iegūst neierobežotas jūsu videoklipa lietošanas tiesības
- Jebkurš YouTube lietotājs iegūst neierobežotas jūsu videoklipa lietošanas tiesības
HTML5 video sniedz dažas priekšrocības salīdzinājumā ar YouTube
Izmantojot HTML5 Video ļauj jums kontrolēt visus jūsu videoklipa aspektus, sākot no tā, kurš to var apskatīt, cik ilgi tas ir, ko satur saturs, kur tas tiek mitināts un kā serveris darbojas. Un HTML5 dod jums iespēju kodēt videoklipu tik daudzos formātos, cik nepieciešams, lai pārliecinātos, ka to var skatīt maksimāli daudz cilvēku. Jūsu klientiem nav nepieciešams spraudnis vai jāgaida, līdz YouTube izlaidīs jaunāku versiju.
Protams, HTML5 video piedāvā dažus trūkumus
Tie ietver:
- Video ir jākodē vismaz trīs dažādos kodekos.
- Lai nodrošinātu pārlūkprogrammas, kas neatbalsta, jums jāiekļauj daži JavaScript HTML5 strādās.
- Jūsu serverim ir jāspēj izpildīt video mitināšanas prasības attiecībā uz joslas platumu.
02
gada 07
Ātrs video atbalsta pārskats tīmeklī
Video pievienošana Web lapām jau sen ir bijis sarežģīts process. Bija tik daudz lietu, kas varētu noiet greizi:
- Pirmkārt, jūs izmantojat tagu, lai iegultu videoklipu savā lapā. BET šis tags ir novecojis par labu citam tagam. Un dažas pārlūkprogrammas to nekad labi neatbalstīja.
- Tātad jūs pārslēdzaties uz tagu, bet vecākas pārlūkprogrammas to neatbalsta, un jaunākās pārlūkprogrammas to atbalsta nedaudz.
- Tad jūs domājat Zibspuldze! Un kodējiet savu video kā FLV failu. Bet Zibspuldze Windows ierīcēs vairs netiek atbalstīts.
- Tātad jūs nolemjat augšupielādēt savu videoklipu video iegulšanas vietnē, piemēram, YouTube, bet pēc tam jums ir radušās problēmas ar YouTube, kuru mēs apspriedām.
- Visbeidzot, jūs nolemjat izmantot HTML5, taču Internet Explorer to neatbalsta (tikai līdz Internet Explorer 9). Pat ja jūs to darāt, ir divi atbalstīti video kodeku standarti un tikai viens pārlūks, kas var izmantot abus.
Ko tad tev vajadzētu darīt? Atteikšanās no video vairs nav iespēja lielākajai daļai vietņu, jo videoklips kļūst arvien nozīmīgāks. Un daudzas vietnes ir veiksmīgi pārslēgušās uz video.
Nākamās šī raksta lapas palīdzēs jums pievienot videoklipu savām tīmekļa lapām, kas darbojas pārlūkprogrammās Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 un 4, iPhone un Android, kā arī Internet Explorer 7 un 8. Jums būs arī atslēgas, kas nepieciešamas, lai vajadzības gadījumā pievienotu atbalstu citām vecākām pārlūkprogrammām.
03
gada 07
Izveidojiet un rediģējiet videoklipu
Pirmā lieta, kas jums nepieciešama, ievietojot videoklipu tīmekļa lapā, ir faktiskais video. Varat vai nu fotografēt nepārtraukti un pēc tam rediģēt, lai izveidotu objektu, vai arī varat to skriptu un plānot pirms laika. Jebkurā gadījumā tas darbojas labi, tas ir tikai tas, kas jums patīk. Ja nezināt, kāda veida video jums vajadzētu izveidot, skatiet šīs idejas no darbvirsmas video rokasgrāmatas:
- Ģimenes video projekti
- Mārketinga un reklāmas video
- Video virtuālās ekskursijas
- Kā video
- Kāzu video
Uzziniet, kā ierakstīt augstas kvalitātes video
Pārliecinieties, vai zināt, kā ierakstīt telpās un ārpus tām, kā arī kā ierakstīt audio. Apgaismojums ir arī ļoti svarīgs - pārāk spilgti kadri sāp acis, un pārāk tumši vienkārši izskatās dubļaini un neprofesionāli. Pat ja jūs plānojat, ka jūsu vietnē ir tikai 30 sekundes ilgs video, jo augstāka kvalitāte tā ir, jo labāk tas tiks atspoguļots jūsu vietnē.
Atcerieties arī, ka autortiesības attiecas uz visām skaņām vai mūziku (kā arī materiālu materiāliem), kuras jūs varētu vēlēties izmantot savā videoklipā. Ja jums nav piekļuves draugam, kurš var uzrakstīt un atskaņot dziesmu jūsu vietā, jums tas būs jāatrod bez autoratlīdzības mūzika spēlēt fonā. Ir arī vietas, kurās varat pievienot materiālus, lai tos pievienotu saviem videoklipiem.
Video rediģēšana
Nav svarīgi, kādu rediģēšanas programmatūru izmantojat, ja vien esat to pārzinājis un varat efektīvi izmantot. Gretchen, darbvirsmas video ceļvedī, ir daži profesionāli video rediģēšanas padomi, kas var palīdzēt rediģēt videoklipus, lai tie izskatās lieliski.
Saglabājiet videoklipu MOV vai AVI (vai MPG, CD, DV)
Pārējā šīs apmācības daļā mēs pieņemsim, ka jūsu videoklips ir saglabāts kāda veida augstas kvalitātes (nesaspiests) formātā, piemēram, AVI vai MOV. Lai gan jūs varat izmantot šos failus tādus, kādi tie ir, jums rodas visas problēmas ar videoklipu, kuras mēs jau esam apsprieduši. Nākamajās lapās ir paskaidrots, kā failu pārveidot trīs veidos, lai to varētu apskatīt vislielākais pārlūku skaits.
04
gada 07
Konvertējiet video uz Ogg Firefox
Pirmais formāts, uz kuru mēs pārveidosim, ir Ogg (dažreiz to sauc arī par Ogg-Theora). Šis formāts ir tāds, kuru var apskatīt Firefox 3.5, Opera 10.5 un Chrome 3.
Diemžēl, lai gan Ogg ir pārlūka atbalsts, daudzas labi zināmās video programmas, kuras varat iegādāties (Adobe Media Encoder, QuickTime utt.), Nepiedāvā Ogg pārveidošanas iespēju. Tātad vienīgais veids, kā pārveidot videoklipu par Ogg, ir atrast reklāmguvumu programmu tīmeklī.
Reklāmguvumu opcijas
Ir tiešsaistes rīks ar nosaukumu Media-Convert, kas apgalvo, ka dažādus video (un audio) formātus pārveido citos video (un audio) formātos. Kad mēs to izmēģinājām ar manu 3 sekunžu testa video, mēs to nevarējām panākt, lai tas darbotos ar manu Mac. Bet jums var būt labāk veicies. Šīs vietnes priekšrocība ir bezmaksas.
Daži citi atrasti rīki ietver:
- Miro video pārveidotājs (Windows Macintosh): Šīs programmas priekšrocība ir konvertēšana gan uz Ogg, gan uz MP4 (H.264), un tā ir atvērtā koda.
- Bezmaksas video pārveidotājs: Mēs domājam, ka šai versijai ir gan Windows, gan Macintosh versija, taču to bija grūti noteikt no viņu vietnes
- Vienkāršs Theora kodētājs (Macintosh): šo mēs mēdzam izmantot.
Kad jūsu videoklips ir saglabāts Ogg formātā, saglabājiet to savā vietnē un dodieties uz nākamo lapu, lai pārveidotu to citos formātos citām pārlūkprogrammām.
05
gada 07
Konvertējiet video uz MP4 pārlūkprogrammai Safari un Internet Explorer
Nākamais formāts, kurā video jāpārveido, ir MP4 (H.264 video), lai to varētu atskaņot pārlūkprogrammā Internet Explorer 9 un jaunākās versijās, Safari 3 un 4, kā arī iPhone un Android ierīcēs.
Šis formāts ir vieglāk pieejams komerciālos produktos, un, iespējams, jums jau ir programma, kas pārveido MP4, ja jums ir video redaktors. Ja Jums ir Adobe pirmizrāde jūs varat izmantot Adobe Video Encoder vai arī, ja jums ir arī QuickTime Pro. Daudzi no pārveidotājiem, kurus mēs apspriedām iepriekšējā lapā, arī video konvertē uz MP4.
- MediaConvert: Tiešsaistes AWS rīks.
- Miro video pārveidotājs (Windows Macintosh): Šīs programmas priekšrocība ir konvertēšana gan uz Ogg, gan uz MP4 (H.264), un tā ir atvērtā koda.
- SUPER (Windows): pārveidos daudz dažādu failu tipus par MP4
- Bezmaksas video pārveidotājs: Mēs domājam, ka šai versijai ir gan Windows, gan Macintosh versija, taču to bija grūti noteikt no viņu vietnes.
06
gada 07
Pievienojiet video elementu savai tīmekļa lapai
- Izveidojiet savu tīmekļa lapu tā, kā jūs to parasti izveidotu:
- Ķermeņa iekšpusē novietojiet
- Izlemiet, kādiem atribūtiem vēlaties būt jūsu videoklipam: ieteicams izmantot vadīklas un iepriekš ielādēt. Izmantojiet plakāta opciju, ja jūsu videoklipam nav laba pirmā aina.
automātiska atskaņošana - lai sāktu, tiklīdz tā ir lejupielādēta - vadīklas - ļauj lasītājiem kontrolēt videoklipu (pauze, attīšana atpakaļ, uz priekšu)
- cilpa - sāciet video no sākuma, kad tas beidzas
- iepriekšēja ielāde - iepriekš lejupielādējiet videoklipu, lai tas būtu gatavs ātrāk, kad klients noklikšķina uz tā
- plakāts - definējiet attēlu, kuru vēlaties izmantot, kad video tiek pārtraukts
- Pēc tam pievienojiet avota failus divām jūsu video versijām (MP4 un OGG)
- Atveriet lapu pārlūkā Chrome 1, Firefox 3.5, Opera 10 un / vai Safari 4 un pārliecinieties, vai tā tiek parādīta pareizi. Jums tas jāpārbauda vismaz Firefox 3.5 un Safari 4 - jo katrs no tiem izmanto atšķirīgu kodeku.
Tieši tā. Kad esat ievietojis šo kodu, jums būs videoklips, kas darbojas pārlūkprogrammās Firefox 3.5, Safari 4, Opera 10 un Chrome 1. Bet kā ar Internet Explorer?
Lai pievienotu video Web lapām, ir ļoti viegli izmantot HTML 5. Lielākā daļa mūsdienu pārlūkprogrammu atbalsta HTML 5 video, lai gan visi to neatbalsta vienādi. Bet tas nozīmē, ka, saglabājot videoklipu gan Ogg, gan MP4 formātā, varat uzrakstīt tikai četras vai piecas HTML rindas, lai tas tiktu parādīts lielākajā daļā mūsdienu pārlūkprogrammu (izņemot Internet Explorer 8). Lūk, kā:
Uzrakstiet HTML 5 doctype marķieri, lai pārlūkprogrammas zinātu sagaidīt HTML 5:
- Izveidojiet savu tīmekļa lapu tā, kā jūs to parasti izveidotu:
- Ķermeņa iekšpusē novietojiet
tags: - Izlemiet, kādiem atribūtiem vēlaties būt jūsu videoklipam: ieteicams izmantot vadīklas un iepriekš ielādēt. Izmantojiet plakāta opciju, ja jūsu videoklipam nav laba pirmā aina.
automātiska atskaņošana - lai sāktu, tiklīdz tā ir lejupielādēta - vadīklas - ļauj lasītājiem kontrolēt videoklipu (pauze, attīšana atpakaļ, uz priekšu)
- cilpa - sāciet video no sākuma, kad tas beidzas
- iepriekšēja ielāde - iepriekš lejupielādējiet videoklipu, lai tas būtu gatavs ātrāk, kad klients noklikšķina uz tā
- plakāts - definējiet attēlu, kuru vēlaties izmantot, kad video tiek pārtraukts
- Pēc tam pievienojiet avota failus divām jūsu video versijām (MP4 un OGG)
elements: - Atveriet lapu pārlūkā Chrome 1, Firefox 3.5, Opera 10 un / vai Safari 4 un pārliecinieties, vai tā tiek parādīta pareizi. Jums tas jāpārbauda vismaz Firefox 3.5 un Safari 4, jo katrs no tiem izmanto atšķirīgu kodeku.
Tieši tā. Kad būsit ievietojis šo kodu, būs pieejams videoklips, kas darbojas pārlūkprogrammās Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ un Chrome 1.
07
gada 07
Pārbaudiet pēc iespējas vairāk pārlūkprogrammu
Lai nodrošinātu mieru, pārbaudiet arī vecākās pārlūkprogrammās, lai redzētu, ko viņi dara, it īpaši, ja daudzi lasītāji izmanto vecākas pārlūkprogrammas.
Video lapu pārbaude ir ļoti svarīga, ja vēlaties veiksmīgi palaist. Pārliecinieties, vai pārbaudāt savu lapu populārākajās pārlūkprogrammās un savas vietnes versijās.
Mēs esam noskaidrojuši, ka, lai arī video testēšanai ir iespējams izmantot tādus rīkus kā BrowserLab un AnyBrowser, tas nav tik uzticams kā lapas atvēršana pārlūkprogrammā. To darot, jūs patiešām varat redzēt, vai tas darbojas vai nē.
Tā kā jums bija visas problēmas kodēt videoklipu vairākos formātos, jums tas jāpārbauda, lai pārliecinātos, ka tas tiek parādīts vairākās pārlūkprogrammās. Tas nozīmē, ka jums tas vismaz jāpārbauda Firefox, Safari un IE.
Jūs varat pārbaudīt pārlūkā Chrome, taču, tā kā Chrome var apskatīt abas metodes, ir grūti pateikt, vai ir kāda problēma vai kuru kodeku Chrome izmanto.
Lai nodrošinātu mieru, pārbaudiet arī vecākās pārlūkprogrammās, lai redzētu, ko viņi dara, it īpaši, ja daudzi lasītāji izmanto vecākas pārlūkprogrammas.
Videoklipa darbība vecākās pārlūkprogrammās
Tāpat kā jebkurai vietnei, vispirms ir jāapsver, cik svarīgi ir panākt, lai šīs pārlūkprogrammas darbotos. Ja 90% jūsu klientu izmanto Netscape, jums vajadzētu izveidot rezerves plānu. Bet, ja to dara mazāk nekā 1%, tas var nebūt tik svarīgi.
Kad esat izlēmis, kuras pārlūkprogrammas mēģināt atbalstīt, vienkāršākais veids ir vienkārši izveidot alternatīvu lapu, kurā viņi varētu skatīt videoklipu. Šajā alternatīvajā lapā jūs iegultu videoklipu, izmantojot HTML 4. Pēc tam vai nu izmantojiet kādu pārlūkprogrammas noteikšanas veidu, lai tos tur novirzītu, vai arī vienkārši pievienojiet saiti uz šo lapu šajā vietnē.