HTML5 video tag ļauj ērti pievienot videoklipus savām tīmekļa lapām. Bet, lai gan šķiet viegli uz virsmas, jums ir daudz lietas, kas jums jādara, lai videoklipu izveidotu un darbotos. Šajā apmācībā tiks veikti soļi, lai izveidotu HTML5 lapu, kurā tiks rādīts videoklips visās mūsdienu pārlūkprogrammās.
- Hostings Jūsu paša HTML5 video salīdzinājumā ar YouTube izmantošanu
- Īss video atbalsta pārskats tīmeklī
- Izveidojiet un rediģējiet savu videoklipu
- Konvertējiet video uz Ogg Firefox
- Konvertēt video uz MP4 Safari
- Pārvērst video par FLV pārlūkprogrammai Internet Explorer
- Pievienojiet videoklipa elementu savai tīmekļa lapai
- Pievienojiet JavaScript un Flash Player, lai Internet Explorer darbotos
- Pārbaudiet pēc iespējas vairāk pārlūkprogrammu
Hostings Jūsu HTML 5 video salīdzinājumā ar YouTube izmantošanu
YouTube ir lieliska vietne. Tas atvieglo videoklipu ievietošanu tīmekļa lapās ātri un ar dažiem nelieliem izņēmumiem ir diezgan vienveidīgs šo videoklipu izpildē. Ja ievietojat videoklipu vietnē YouTube, varat būt diezgan pārliecināts, ka kāds to varēs skatīties.
Bet, izmantojot YouTube, lai ievietotu jūsu video, ir daži trūkumi
Lielākā daļa problēmu ar YouTube rodas patērētāja pusē, nevis dizaineru pusē, piemēram:
- Lēna meklēšana un indeksēšana
- Servera darbības pārtraukumi
- Saturs tiek izņemts (šķietami) patvaļīgi
- Pārāk daudz slikta satura
Tomēr ir daži iemesli, kāpēc YouTube ir slikti arī satura izstrādātājiem, tostarp:
- Videoklipu maksimālais garums 10 minūšu laikā (bezmaksas kontiem)
- Slikta augšupielādes veiktspēja
- YouTube iegūst neierobežotas lietošanas tiesības uz jūsu videoklipu
- Jebkurš YouTube lietotājs iegūst neierobežotas lietošanas tiesības jūsu videoklipam
HTML5 video dod dažas priekšrocības pār YouTube
Izmantojot HTML5 video, jūs varat kontrolēt katru sava videoklipa aspektu, no tā, kurš to var apskatīt, cik ilgi tas ir, kāds ir saturs, kur tas ir mitināts un kā serveris izpilda. Un HTML5 video ļauj jums kodēt savu videoklipu tik daudz formātu, cik nepieciešams, lai pārliecinātos, ka to var skatīt maksimālais skaits. 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:
- Jums ir jākodē videoklips vismaz trīs dažādos kodekos
- Jums ir jāiekļauj kāds JavaScript, lai nodrošinātu, ka pārlūkprogrammas, kas neatbalsta HTML5, darbosies
- Jūsu serverim ir jāspēj vadīt video joslas platuma prasības
Turpiniet lasīt zemāk
02 no 10Īss video atbalsta pārskats tīmeklī
Pievienošana videoklipam tīmekļa lapās jau sen ir sarežģīts process. Bija tik daudz lietu, kas varētu notikt nepareizi:
- Pirmkārt, jūs izmantojat tagu, lai iegultu videoklipu savā lapā. BET šī atzīme ir novecojusi par labu citai atzīmei. Un daži pārlūkprogrammas to nekad nav labi atbalstījušas.
- Tātad jūs pārietat uz tag, bet vecākas pārlūkprogrammas to neatbalsta, un jaunākas pārlūkprogrammas ir skicinošas.
- Tad tu domā Flash! Un kodējiet savu video kā FLV failu. Bet Flash netiek atbalstīts daudzās mobilajās ierīcēs, un daudzi cilvēki ienīst Flash neatkarīgi no tā, kā tā tiek izmantota (25% respondentu manā aptaujā, uzdodot jautājumu par to, kā jūs jūtaties par Flash, paziņoja, ka viņi nekādā veidā nevar izturēt Flash).
- Tātad jūs nolemjat augšupielādēt savu videoklipu videoklipa iegultā vietnei, piemēram, YouTube, bet tad jums ir problēmas ar YouTube, par kuru mēs diskutējām.
- Visbeidzot, jūs nolemjat iet ar HTML5, bet pārlūkprogramma Internet Explorer to neatbalsta (tikai Internet Explorer 9). Un pat ja jūs to darāt, ir pieejami divi atbalstāmi video kodeku standarti un tikai viens pārlūks, kas tos var izmantot abus. Pārlūkprogrammas atbalsts video kodekiem un konteineriem
Tātad, ko tev vajadzētu darīt? Lielākajai daļai vietņu videoklipu vairs nav iespējams, jo videoklips kļūst arvien svarīgāks. Un daudzas vietnes veiksmīgi pārslēdzas uz videoklipu.
Turpmākajās šī raksta lapās būs redzams, kā pievienot videoklipus Web lapām, kas darbojas Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 un 4, iPhone un Android, Flash un Internet Explorer 7 un 8. Jūs Jums ir arī atslēgas, kas jums nepieciešamas, lai vajadzības gadījumā pievienotu atbalstu citām vecākām pārlūkprogrammām.
Turpiniet lasīt zemāk
03 no 10Izveidojiet un rediģējiet savu videoklipu
Pirmā lieta, kas jums nepieciešama, kad vēlaties ievietot videoklipu tīmekļa lapā, ir faktiskais videoklips. Jūs varat vai nu pastāvīgi fotografēt, gan pēc tam rediģēt, lai izveidotu kādu funkciju, vai arī varat to skriptēt un plānot pirms laika. Katrā ziņā darbojas labi, tas ir tikai tas, ar ko jūs esat apmierināts. Ja nezināt, kāda veida videoklipu jums vajadzētu izveidot, skatiet šīs idejas no Desktop Video Guide:
- Ģimenes videoprojekti
- Mārketings 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 zina, kā ierakstīt telpās un ārā, kā arī kā ierakstīt audio. Apgaismojums ir arī ļoti svarīgs - kadri, kas ir pārāk spilgti sāp acis, un pārāk tumšs tikai izskatās dubļains un neprofesionāls. Pat ja jūs plānojat savā vietnē tikai 30 sekundes ierakstīt videoklipu, jo augstāka kvalitāte, jo labāk tas tiks atspoguļots jūsu vietnē.
Atcerieties arī, ka autortiesības attiecas uz jebkādām skaņām vai mūziku (kā arī uz filmu materiāliem), kurus jūs, iespējams, vēlēsities izmantot savam videoklipam. Ja jums nav piekļuves draugam, kurš var ierakstīt un atskaņot dziesmu jums, jums būs jāatrod bez maksas mūzika, lai atskaņotu fonā. Ir arī vietas, kurās varat pievienot videomateriālus filmām.
Video rediģēšana
Nav svarīgi, kāda rediģēšanas programmatūra jūs izmantojat, tik ilgi, kamēr jūs to esat iepazinies un var efektīvi to izmantot. Gretchen, Desktop Video Guide, ir daži profesionāli video rediģēšanas padomi, kas var palīdzēt jums rediģēt savus videoklipus, lai tie izskatās lieliski.
Saglabājiet savu video MOV vai AVI (vai MPG, CD, DV)
Pārējā šajā apmācībā mēs pieņemam, ka jūsu video ir saglabāts kāda veida augstas kvalitātes (nesaistītā) formātā, piemēram, AVI vai MOV. Kamēr jūs varat izmantot šos failus tāpat kā jūs, rodas visas ar videoklipu saistītas problēmas, par kurām esam jau apsprieduši. Turpmākajās lappusēs tiks paskaidrots, kā failu pārvērst trijos veidos, lai to varētu skatīt visvairāk pārlūkprogrammu.
04 no 10Konvertējiet video uz Ogg Firefox
Pirmais formāts, kuru mēs pārveidosim, ir Ogg (dažreiz saukts par Ogg-Theora). Šis formāts ir tas, ka visi lietotāji var apskatīt Firefox 3.5, Opera 10.5 un Chrome 3.
Diemžēl, kamēr Ogg ir pārlūka atbalsts, daudzas labi zināmas video programmas, kuras varat iegādāties (Adobe Media Encoder, QuickTime utt.) Nepiedāvā Ogg konversijas opciju. Tātad vienīgais veids, kā pārvērst savu videoklipu uz Ogg, ir atrast reklāmguvumu programmu tīmeklī.
Reklāmguvumu iespējas
Pastāv tiešsaistes rīks, ko sauc par Media-Convert, kas apgalvo, ka dažādi video (un audio) formāti tiek pārvērsti citos video (un audio) formātos. Kad mēs to izmēģinājām ar manu 3 sekunžu testa videoklipu, mēs nevarējām to paveikt darbā ar manu Mac. Bet jums var būt labāka veiksme. Šī vietne ir par labu, ka tā ir brīva.
Daži citi mūsu atrodamie rīki ietver:
- Miro Video Converter (Windows Macintosh) - šai programmai ir priekšrocība pārveidot gan Ogg, gan MP4 (H.264), un tā ir atvērtā koda versija.
- Koyote Video Converter (Windows)
- Bezmaksas video pārveidotājs Mēs domājam, ka tam ir gan Windows, gan Macintosh versija, taču to vietā bija grūti pateikt
- Vienkāršs Theora Encoder (Macintosh) - tas ir tas, kuru mēs mēdzam izmantot.
Kad esat saglabājis savu videoklipu Ogg formātā, saglabājiet to savā tīmekļa vietnes atrašanās vietā un pārejiet uz nākamo lapu, lai pārvērstu to citos formātos citās pārlūkprogrammās.
Turpiniet lasīt zemāk
05 no 10Konvertēt video uz MP4 Safari
Nākamais formāts, no kā jāpārveido jūsu videoklips, ir MP4 (H.264 video), lai to varētu atskaņot Safari 3 un 4 un iPhone un Android. Turklāt H.264 video var viegli pārvērst FLV failos, lai skatītos Flash.
Šis formāts ir ērtāk pieejams komerciālos produktos, un jums, iespējams, jau ir programma, kas konvertē uz MP4, ja jums ir video redaktors. Ja jums ir Adobe Premiere, jūs varat izmantot Adobe Video Encoder vai, ja jums ir QuickTime Pro, kas arī darbosies. Daudzi no reklāmdevējiem, kurus mēs diskutējām iepriekšējā lapā, arī konvertēs video uz MP4.
- MediaConvert - tiešsaistes AWS rīks.
- Miro Video Converter (Windows Macintosh) - šai programmai ir priekšrocība pārveidot gan Ogg, gan MP4 (H.264), un tā ir atvērtā koda versija.
- SUPER (Windows) - pārveidos daudzus dažādus failu tipus uz MP4 un FLV
- Bezmaksas video pārveidotājs Mēs domājam, ka tam ir gan Windows, gan Macintosh versija, taču to vietā bija grūti pateikt.
Saglabājiet savu MP4 failu savā vietnē un pēc tam jums to vajadzēs pārvērst Flash programmā, lai izmantotu pārlūkprogrammu Internet Explorer.
06 no 10Pārvērst video par FLV pārlūkprogrammai Internet Explorer
Vieglākais veids, kā konvertēt video uz FLV, ir izmantot pašu Flash. Tā mēs pārveidojam savus videoklipus uz Flash. Bet, ja jums nav Flash, šeit ir divi populāri rīki failu pārvēršanai FLV:
- SUPER (Windows) - pārveidos daudzus dažādus failu tipus uz MP4 un FLV
- ffmpegX (Macintosh) - pārveidos daudzus dažādus failu tipus Mp4 un FLV.
Saglabājiet savu FLV failu savā tīmekļa vietnē, un nākamajā lapā būs redzams, kā rakstīt HTML, lai jūs varētu atskaņot savus videoklipus.
Turpiniet lasīt zemāk
07 no 10Pievienojiet videoklipa elementu savai tīmekļa lapai
Ir ļoti viegli izmantot HTML 5, lai pievienotu video tīmekļa lapās. Lielākā daļa mūsdienu pārlūkprogrammu atbalsta HTML 5 video, lai gan tie ne visi atbalsta to vienādi. Bet tas nozīmē, ka, ja jūs saglabājat savu videoklipu gan Ogg, gan MP4 formātā, jūs varēsit rakstīt tikai četras vai piecas HTML rindiņas, lai to varētu parādīt vairumā mūsdienu pārlūkprogrammās (izņemot pārlūkprogrammu Internet Explorer 8). Lūk, kā:
Uzrakstiet HTML 5 doctype marķieri, lai pārlūkprogrammas zinātu, ka gaidīsit HTML 5:
- Izveidojiet Web lapu, kā jūs to parasti izveidotu:
- Iekšpusē ievietojiet
- Izlemiet, kādi atribūti vēlaties, lai jūsu videoklips būtu: iesakām izmantot vadības ierīces un iepriekš ielādēt. Izmantojiet plakāta opciju, ja videoklipam nav labas pirmās ainas.
- autoplay - lai sāktu, tiklīdz tas ir lejupielādēts
- kontrole - ļauj lasītājiem kontrolēt videoklipu (pauzēt, attīt atpakaļ, ātri pārvietoties)
- cilpa - sāciet video no sākuma, kad tas beidzas
- Iepriekš ielādēt - 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 apturēts
- Pēc tam pievienojiet avota failus divām jūsu video (MP4 un OGG) versijām
- Atveriet lapu Chrome 1, Firefox 3.5, Opera 10 un / vai Safari 4 un pārliecinieties, vai tā ir pareizi parādīta. Jums vajadzētu pārbaudīt to vismaz Firefox 3.5 un Safari 4 versijā, jo katram no tiem tiek izmantots cits kods.
Tieši tā. Kad jums būs šis kods, jums būs videoklips, kas darbojas Firefox 3.5, Safari 4, Opera 10 un Chrome 1. Bet ko par Internet Explorer?
Internet Explorer nepatīk HTML 5 vai
Nākamajā sadaļā mēs runāsim par to, ko jūs varat darīt, lai IE 8 labi spēlētu ar saviem HTML 5 video tagiem un parādītu videoklipu. Jums ir jāizmanto Flash.Labā ziņa ir tā, ka IE 9 atbalstīs HTML 5 un video tagu.
08 no 10Pievienojiet JavaScript un Flash Player, lai Internet Explorer darbotos
Iespējams, pamanījāt, ka iepriekšējā lapas HTML failā nebija avota līnijas. Un, ja jūs pārbaudījāt šo lapu pārlūkprogrammā Internet Explorer, tā nedarbosies. Tas ir tāpēc, ka pārlūkprogramma Internet Explorer neatpazīst HTML 5 un tā nevar atskaņot oriģinālos OGG vai MP4 videoklipus. Lai Internet Explorer 7 un 8 darbotos, jums ir nepieciešams, lai tas atskaņotu videoklipu kā Flash. Bet ir vairāk pasākumu, lai to iegūtu darbā, nevis vienkārši pievienojot FLV failu.
1. darbība: iegūstiet Flash video atskaņotāju jūsu vietnei
Mēs iesakām iegūt FlowPlayer, jo tas ir atvērts avots Flash video atskaņotājs, kuru varat instalēt savā tīmekļa serverī un izmantot, kad atskaņojat Flash video. FlowPlayer bezmaksas versija ievieto reklāmu jūsu videoklipos, bet, ja jums tas nepieciešams, varat arī iegādāties komerciālās licences.
Lai instalētu FlowPlayer savā vietnē, izpildiet FlowPlayer vietnes norādījumus. Īsāk sakot, savā vietnē ievietosiet 2 SWF failus un JavaScript failu. HTML apakšdaļā (pirms tag) jūs pievienosiet rindu:
Bet Internet Explorer joprojām neizdosies atskaņot videoklipu, jums tas jāapmāca, kā atpazīt HTML 5 tagus.
2. solis: pārliecinieties, ka pārlūkprogramma Internet Explorer ir lasījusi HTML 5 tagus
Google Code ir parocīgs skripts ar nosaukumu "HTML Shiv", kas palīdzēs IE atpazīt HTML 5 elementus. Tātad
no jūsu HTML dokumenta, uz kuru vēlaties atsaukties. Vislabāk to pievienot IE nosacījumos, lai citas pārlūkprogrammas netiktu sajauktas:
Labi, tagad IE atzīs
