HTML5-videomærket gør det nemt at føje video til din web sider. Men mens det ser let ud på overfladen, er der mange ting, du skal gøre for at få din video i gang. Denne vejledning fører dig gennem trinene til oprettelse af en side i HTML5, der kører video i alle moderne browsere.
- Hosting din egen HTML5-video vs. Brug af YouTube
- Hurtig oversigt over videosupport på internettet
- Opret og rediger din video
- Konverter videoen til Ogg for Firefox
- Konverter videoen til MP4 til Safari og Internet Explorer
- Føj videoelementet til din webside
- Tilføj JavaScript-afspilleren for at få Internet Explorer til at arbejde
- Test i så mange browsere som du kan
01
af 07
Hosting din egen HTML 5-video vs. Brug af YouTube
YouTube er et fantastisk sted. Det gør det nemt at integrere video i web sider hurtigt, og med nogle mindre undtagelser er det ret problemfrit i udførelsen af disse videoer. Hvis du sender en video på YouTube, kan du være ret sikker på, at nogen kan se den.
Men at bruge YouTube til at integrere dine videoer har nogle ulemper
De fleste af problemerne med Youtube er på forbrugersiden snarere end på designsiden, ting som:
- Langsom søgning og indeksering
- Serverafbrydelser
- Indhold fjernes (tilsyneladende) vilkårligt
- For meget dårligt indhold
Men der er nogle grunde til, at YouTube også er dårligt for indholdsudviklere, herunder:
- 10 minutters maksimal længde for videoer (til gratis konti)
- Dårlig uploadydelse
- YouTube opnår ubegrænset brugsret til din video
- Enhver YouTube-bruger får ubegrænset brugsret til din video
HTML5-video giver nogle fordele i forhold til YouTube
Ved brug af HTML5 for video kan du styre alle aspekter af din video, fra hvem der kan se den, hvor længe den er, hvad indholdet indeholder, hvor den hostes, og hvordan serveren fungerer. Og HTML5 giver dig mulighed for at kode din video i så mange formater, som du har brug for for at sikre, at det maksimale antal mennesker kan se den. Dine kunder har ikke brug for et plugin eller vente, indtil YouTube frigiver en nyere version.
Selvfølgelig tilbyder HTML5-video nogle ulemper
Disse inkluderer:
- Du skal kode din video i mindst tre forskellige codecs.
- Du skal medtage noget JavaScript for at sikre browsere, der ikke understøtter HTML5 vil arbejde.
- Din server skal være i stand til at håndtere båndbreddekravene ved hosting af videoer.
02
af 07
Hurtig oversigt over videosupport på internettet
Tilføjelse af video til websider har længe været en vanskelig proces. Der var så mange ting, der kunne gå galt:
- Først bruger du tag for at integrere din video på din side. MEN dette tag udfases til fordel for et andet tag. Og nogle browsere understøttede det alligevel aldrig godt.
- Så du skifter til tag, men ældre browsere understøtter det ikke, og nyere browsere er sketchy i dets support.
- Så tænker du Blitz! Og kod din video som en FLV-fil. Men Blitz understøttes ikke længere på Windows-enheder.
- Så du beslutter at uploade din video til et videoindlejringswebsted som YouTube, men så har du de problemer med YouTube, vi diskuterede.
- Endelig beslutter du at gå med HTML5, men Internet Explorer understøtter det ikke (først Internet Explorer 9). Og selvom du gør det, er der to videokodec-standarder, der understøttes, og kun en browser, der kan bruge begge.
Så hvad skal du gøre? At opgive video er ikke længere en mulighed for de fleste websteder, da videoen bliver mere og mere vigtig. Og mange steder er med succes skiftet til video.
De følgende sider i denne artikel vil lede dig gennem, hvordan du tilføjer en video til dine websider, der fungerer i Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 og 4, iPhone og Android og Internet Explorer 7 og 8. Du har også de nøgler, du har brug for for at tilføje support til andre ældre browsere, hvis det er nødvendigt.
03
af 07
Opret og rediger din video
Den første ting, du har brug for, når du skal placere en video på en webside, er den faktiske video. Du kan enten skyde kontinuerligt og redigere bagefter for at oprette en funktion, eller du kan scripte den og planlægge den på forhånd. Uanset hvad fungerer godt, det er bare hvad du er fortrolig med. Hvis du ikke ved, hvilken type video du skal lave, skal du tjekke disse ideer fra Desktop Video Guide:
- Familievideoprojekter
- Marketing og salgsfremmende videoer
- Video Virtual Tours
- Sådan videoer
- Bryllupsvideoer
Lær, hvordan du optager video i høj kvalitet
Sørg for, at du ved, hvordan du optager indendørs og udendørs samt hvordan du optager lyd. Belysning er også meget vigtig - skud, der er for lyse, gør ondt i øjnene og for mørkt ser bare mudret og uprofessionelt ud. Selvom du kun planlægger at have en 30-sekunders video på dit websted, jo højere kvalitet er det jo bedre afspejles det på dit websted.
Husk også, at ophavsret gælder for lyde eller musik (samt stock-optagelser), som du måske vil bruge i din video. Hvis du ikke har adgang til en ven, der kan skrive og afspille en sang for dig, skal du finde den royaltyfri musik at spille i baggrunden. Der er også steder, du kan optage optagelser for at tilføje til dine videoer.
Redigering af din video
Det betyder ikke noget, hvilken redigeringssoftware du bruger, så længe du er fortrolig med det og kan bruge det effektivt. Gretchen, Desktop Video Guide, har nogle professionelle videoredigeringstip, der kan hjælpe dig med at redigere dine videoer, så de ser flotte ud.
Gem din video til en MOV eller AVI (eller MPG, CD, DV)
I resten af denne vejledning antager vi, at du har din video gemt i en form for højkvalitets (ikke-komprimeret) format som AVI eller MOV. Mens du kan bruge disse filer, som de er, løber du ind i alle de problemer med den video, som vi allerede har diskuteret. De følgende sider forklarer, hvordan du konverterer din fil til tre typer, så den kan ses af det største antal browsere.
04
af 07
Konverter videoen til Ogg for Firefox
Det første format, vi konverterer til, er Ogg (undertiden kaldet Ogg-Theora). Dette format er et, som Firefox 3.5, Opera 10.5 og Chrome 3 alle kan se.
Desværre, mens Ogg har browsersupport, tilbyder mange af de kendte videoprogrammer, du kan købe (Adobe Media Encoder, QuickTime osv.), Ikke en Ogg-konverteringsmulighed. Så den eneste måde at konvertere din video til Ogg på er at finde et konverteringsprogram på Internettet.
Konverteringsmuligheder
Der er et online værktøj kaldet Media-Convert, der hævder at konvertere forskellige formater af video (og lyd) til andre video- (og lyd) formater. Da vi prøvede det med min 3-sekunders testvideo, kunne vi ikke få det til at fungere på min Mac. Men du har måske bedre held. Dette site har fordelen ved at være gratis.
Nogle andre værktøjer, vi fandt, inkluderer:
- Miro Video Converter (Windows Macintosh): Dette program har fordelen ved at konvertere til både Ogg og MP4 (H.264), og det er open source.
- Gratis videokonverter: Vi tror, at dette har både en Windows- og en Macintosh-version, men det var svært at fortælle fra deres websted
- Enkel Theora Encoder (Macintosh): Dette er den, vi plejer at bruge.
Når du har gemt din video i Ogg-format, skal du gemme den på en placering på dit websted og gå til næste side for at konvertere den til andre formater til andre browsere.
05
af 07
Konverter videoen til MP4 til Safari og Internet Explorer
Det næste format, du skal konvertere din video til, er MP4 (H.264-video), så den kan afspilles på Internet Explorer 9 og nyere, Safari 3 og 4 og iPhone og Android.
Dette format er lettere tilgængeligt i kommercielle produkter, og du har sandsynligvis allerede et program, der konverterer til MP4, hvis du har en videoredigerer. Hvis du har Adobe Premiere du kan bruge Adobe Video Encoder, eller hvis du har QuickTime Pro, der også fungerer. Mange af de konvertere, vi diskuterede på den forrige side, konverterer også videoer til MP4.
- MediaConvert: Et online AWS-værktøj.
- Miro Video Converter (Windows Macintosh): Dette program har fordelen ved at konvertere til både Ogg og MP4 (H.264), og det er open source.
- SUPER (Windows): Konverterer mange forskellige filtyper til MP4
- Gratis videokonverter: Vi tror, at dette har både en Windows- og en Macintosh-version, men det var svært at fortælle fra deres websted.
06
af 07
Føj videoelementet til din webside
- Opret din webside, som du normalt ville oprette den:
- Anbring kroppen i kroppen
- Beslut hvilke attributter du vil have din video: Vi anbefaler at bruge kontrolelementer og forudindlæsning. Brug plakatindstillingen, hvis din video ikke har en god første scene.
autoplay - for at starte, så snart det er downloadet - kontrolelementer - lad dine læsere styre videoen (pause, spole tilbage, spole frem)
- loop - start videoen fra starten, når den slutter
- preload - pre-download videoen, så den er klar hurtigere, når kunden klikker på den
- plakat - definer det billede, du vil bruge, når videoen stoppes
- Tilføj derefter kildefilerne til de to versioner af din video (MP4 og OGG) inde i
- Åbn siden i Chrome 1, Firefox 3.5, Opera 10 og / eller Safari 4, og sørg for, at den vises korrekt. Du bør teste det i mindst Firefox 3.5 og Safari 4 - da de hver bruger en anden codec.
Det er det. Når du har denne kode på plads, har du en video, der fungerer i Firefox 3.5, Safari 4, Opera 10 og Chrome 1. Men hvad med Internet Explorer?
Det er meget nemt at bruge HTML 5 til at tilføje en video til websider. De fleste moderne browsere understøtter HTML 5-video, selvom de ikke alle understøtter det på samme måde. Men hvad dette betyder er, at hvis du gemmer din video i både Ogg- og MP4-formater, kan du kun skrive fire eller fem linjer HTML for at få den vist i de fleste moderne browsere (undtagen Internet Explorer 8). Sådan gør du:
Skriv HTML 5-doktypemarkøren, så browsere ved at forvente HTML 5:
- Opret din webside, som du normalt ville oprette den:
- Anbring kroppen i kroppen
tag: - Beslut hvilke attributter du vil have din video: Vi anbefaler at bruge kontrolelementer og forudindlæsning. Brug plakatindstillingen, hvis din video ikke har en god første scene.
autoplay - for at starte, så snart det er downloadet - kontrolelementer - lad dine læsere styre videoen (pause, spole tilbage, spole frem)
- loop - start videoen fra starten, når den slutter
- preload - pre-download videoen, så den er klar hurtigere, når kunden klikker på den
- plakat - definer det billede, du vil bruge, når videoen stoppes
- Tilføj derefter kildefilerne til de to versioner af din video (MP4 og OGG) inde i
element: - Åbn siden i Chrome 1, Firefox 3.5, Opera 10 og / eller Safari 4, og sørg for, at den vises korrekt. Du skal teste det i mindst Firefox 3.5 og Safari 4, da de hver bruger en anden codec.
Det er det. Når du har denne kode på plads, har du en video, der fungerer i Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ og Chrome 1.
07
af 07
Test i så mange browsere som du kan
For din ro i sindet skal du også teste i ældre browsere for at se, hvad de laver, især hvis mange af dine læsere bruger ældre browsere.
Test af videosider er afgørende, hvis du vil have en vellykket lancering. Du skal være sikker på at teste din side i de mest populære browsere og versioner til dit websted.
Vi har fundet ud af, at selvom det er muligt at bruge værktøjer som BrowserLab og AnyBrowser til at teste video, er det ikke så pålideligt som at bringe siden op i en browser selv. Når du gør det, kan du virkelig se, om det fungerer eller ej.
Da du har gjort alt for problemer med at kode din video i flere formater, skal du teste den for at sikre, at den vises i flere browsere. Dette betyder, at du som minimum skal teste det i Firefox, Safari og IE.
Du kan teste i Chrome, men da Chrome kan se begge metoder, er det svært at fortælle, om der er et problem, eller hvilken codec Chrome bruger.
For din ro i sindet skal du også teste i ældre browsere for at se, hvad de laver, især hvis mange af dine læsere bruger ældre browsere.
Få videoen til at fungere i ældre browsere
Som med enhver webside skal du først overveje, hvor vigtigt det er at få disse browsere til at fungere. Hvis 90% af dine kunder bruger Netscape, skal du have en reserveplan for dem. Men hvis mindre end 1% gør det, betyder det måske ikke så meget.
Når du har besluttet, hvilke browsere du vil prøve at understøtte, er den nemmeste måde blot at oprette en alternativ side, som de kan se videoen i. På den alternative side vil du integrere en video ved hjælp af HTML 4. Og brug enten en eller anden form for browseropdagelse til at omdirigere dem der, eller tilføj bare et link til den side på denne.