HTML5-videotaggen gør det nemt at tilføje video til dine websider. Men mens det ser let ud på overfladen, er der mange ting, du skal gøre for at få din video til at køre. Denne vejledning tager dig gennem trinene for at oprette en side i HTML5, der vil køre video i alle de moderne browsere.
- Hosting din egen HTML5 Video vs. Brug af YouTube
- Hurtigt overblik over video support på internettet
- Opret og rediger din video
- Konverter videoen til Ogg for Firefox
- Konverter videoen til MP4 til Safari
- Konverter videoen til FLV til Internet Explorer
- Tilføj videoelementet til din webside
- Tilføj JavaScript og Flash Player for at få Internet Explorer til at fungere
- Test i så mange browsere som du kan
Hosting din egen HTML 5 Video vs brug af YouTube
YouTube er et godt websted. Det gør det nemt at integrere video på websider hurtigt, og med nogle mindre undtagelser er det ret problemfrit ved udførelsen af disse videoer. Hvis du sender en video på YouTube, kan du være helt sikker på, at alle vil kunne se det.
Men at bruge YouTube til at integrere dine videoer har nogle ulemper
De fleste af problemerne med YouTube er på forbrugersiden, snarere end på designersiden, ting som:
- Langsom søgning og indeksering
- Serverafbrud
- Indhold bliver fjernet (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 (gratis konti)
- Dårlig upload-ydeevne
- YouTube får ubegrænsede brugsrettigheder til din video
- Enhver YouTube-bruger får ubegrænsede brugsrettigheder til din video
HTML5 Video giver nogle fordele over YouTube
Ved hjælp af HTML5 til video får du kontrol over alle aspekter af din video, fra hvem der kan se det, hvor længe det er, hvad indholdet indeholder, hvor det er vært og hvordan serveren udfører. Og HTML5-video giver dig mulighed for at kode din video i så mange formater som du skal sikre dig, at det maksimale antal mennesker kan se det. Dine kunder har ikke brug for et plugin eller at vente, indtil YouTube udgiver en nyere version.
Selvfølgelig tilbyder HTML5 Video nogle ulemper
Disse omfatter:
- Du skal kode din video i mindst tre forskellige codecs
- Du skal medtage nogle JavaScript for at sikre, at browsere, der ikke understøtter HTML5, vil fungere
- Din server skal kunne håndtere båndbreddekravene for hosting-videoer
Fortsæt læsning herunder
02 af 10Hurtigt overblik over video support 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:
- For det første bruger du tag til at integrere din video i din side. MEN den tag er forældet til fordel for et andet mærke. Og nogle browsere har aldrig støttet det godt alligevel.
- Så du skifter til tag, men ældre browsere understøtter det ikke, og nyere browsere er skitserede i sin support.
- Så tror du Flash! Og kode din video som en FLV-fil. Men Flash understøttes ikke af mange mobile enheder, og mange mennesker hader Flash, uanset hvordan den bruges. (25% af respondenterne i min afstemning spørger om, hvordan du føler om Flash, at de ikke kan stå Flash på nogen måde).
- Så du beslutter dig for at uploade din video til et videoindlejringssted som YouTube, men så har du problemerne med YouTube, vi diskuterede.
- Endelig beslutter du at gå med HTML5, men Internet Explorer understøtter det ikke (ikke før Internet Explorer 9). Og selvom du gør det, er der to video codec standarder, der understøttes og kun en browser, der kan bruge begge. Browser Support til Video Codecs og Containere
Så hvad skal du gøre? At give op på video er ikke længere en mulighed for de fleste websteder, da videoen bliver mere og mere vigtig. Og mange websteder har med held skiftet til video.
På de følgende sider i denne artikel vil du gennemgå, hvordan du tilføjer video til dine websider, der fungerer i Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 og 4, iPhone og Android, Flash og Internet Explorer 7 og 8. Du vil Har også de nøgler, du har brug for for at tilføje support til andre ældre browsere, hvis det er nødvendigt.
Fortsæt læsning herunder
03 af 10Opret og rediger din video
Den første ting du har brug for, når du skal lægge en video på en webside, er den egentlige video. Du kan enten skyde kontinuerligt og redigere bagefter for at oprette en funktion, eller du kan scripte det og planlægge det ud før tid. Uanset hvad det virker godt, er det bare hvad du er komfortabel 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 videoklip
- Bryllup Videoer
Lær, hvordan du optager video med høj kvalitet
Sørg for at vide, hvordan du optager indendørs og udendørs, samt hvordan du optager lyd. Belysning er også meget vigtig - skarpe skud gør øjnene øje, og for mørk bare se mudret og uprofessionelt. Selvom du kun planlægger at have en 30 sekunders video på dit websted, jo højere kvalitet er det bedre, det vil afspejle på dit websted.
Husk også, at ophavsretten gælder for lyde eller musik (samt lageroptagelser), 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 royaltyfri musik til at spille i baggrunden. Der er også steder, du kan stock footage til at føje til dine videoer.
Redigering af din video
Det er ligegyldigt hvad redigeringssoftware du bruger, bare så længe du er bekendt med det og kan bruge den effektivt. Gretchen, Desktop Video Guide, har nogle professionelle video redigering tips, der kan hjælpe dig med at redigere dine videoer, så de ser godt ud.
Gem din video til en MOV eller AVI (eller MPG, CD, DV)
For resten af denne tutorial vil vi antage, at du har gemt din video i en form for høj kvalitet (ikke-komprimeret) format som AVI eller MOV. Mens du kan bruge disse filer som de er, løber du ind i alle problemer med video, som vi allerede har diskuteret. På de følgende sider beskrives, hvordan du konverterer din fil til tre typer, så den kan ses af det største antal browsere.
04 af 10Konverter 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 browser support, tilbyder mange af de kendte videoprogrammer, som du kan købe (Adobe Media Encoder, QuickTime osv.) Ikke en Ogg konvertering. Så den eneste måde at konvertere din video til Ogg er at finde et konverteringsprogram på nettet.
Konverteringsindstillinger
Der er et online værktøj kaldet Media-Convert, der hævder at konvertere forskellige formater af video (og lyd) til andre videoformater (og lyd). 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 held og lykke. Dette websted har den fordel at være fri.
Nogle andre værktøjer vi fandt omfatter:
- Miro Video Converter (Windows Macintosh) - Dette program har den fordel at konvertere til både Ogg og MP4 (H.264), og det er open source.
- Koyote Video Converter (Windows)
- Free Video Converter Vi mener, at dette har både en Windows og en Macintosh-version, men det var svært at fortælle fra deres websted
- Simple Theora Encoder (Macintosh) - det er det, vi plejer at bruge.
Når du har gemt din video i Ogg-format, skal du gemme den til en placering på din hjemmeside og gå til næste side for at konvertere den til andre formater til andre browsere.
Fortsæt læsning herunder
05 af 10Konverter videoen til MP4 til Safari
Det næste format, du skal konvertere din video til, er MP4 (H.264 video), så den kan afspilles på Safari 3 og 4 og iPhone og Android. Plus, H.264-videoer kan nemt konverteres til FLV-filer til at se på Flash.
Dette format er mere tilgængeligt i kommercielle produkter, og du har sikkert allerede et program, der konverterer til MP4, hvis du har en videoredigerer. Hvis du har Adobe Premiere, kan du bruge Adobe Video Encoder, eller hvis du har QuickTime Pro, der også fungerer. Mange af de konverterere, 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 den fordel at konvertere til både Ogg og MP4 (H.264), og det er open source.
- SUPER (Windows) - konverterer mange forskellige filtyper til MP4 og FLV
- Free Video Converter Vi mener, at dette har både en Windows og en Macintosh-version, men det var svært at fortælle fra deres websted.
Gem din MP4-fil til din hjemmeside, og derefter skal du konvertere den til Flash til Internet Explorer til at bruge.
06 af 10Konverter videoen til FLV til Internet Explorer
Den nemmeste måde at konvertere videoer til FLV på er at bruge Flash selv. Sådan konverterer vi mine videoer til Flash. Men hvis du ikke har Flash, er her to populære værktøjer til at konvertere filer til FLV:
- SUPER (Windows) - konverterer mange forskellige filtyper til MP4 og FLV
- ffmpegX (Macintosh) - konverterer mange forskellige filtyper til MP4 og FLV.
Gem din FLV-fil til din hjemmeside, og den næste side viser dig, hvordan du skriver HTML'en, så du kan afspille dine videoer.
Fortsæt læsning herunder
07 af 10Tilføj videoelementet til din webside
Det er meget nemt at bruge HTML 5 til at tilføje video til websider. De fleste moderne browsere understøtter HTML 5-video, selv om de ikke alle understøtter det på samme måde. Men hvad det betyder er, at hvis du gemmer din video som både Ogg og MP4 formater, vil du være i stand til at skrive kun fire eller fem linjer HTML for at få det til at blive vist i de fleste moderne browsere (undtagen Internet Explorer 8). Sådan er det:
Skriv HTML 5 doctype-markøren, så browsere ved at forvente HTML 5:
- Opret din webside som du normalt ville oprette den:
- Inde i kroppen, placere
- Bestem hvilke attributter du vil have din video til at have: Vi anbefaler at bruge kontroller og forudindlæsning. Brug plakatindstillingen, hvis din video ikke har en god første scene.
- autoplay - for at starte så snart det er downloadet
- kontroller - tillader dine læsere at styre videoen (pause, spole tilbage, fremadspoling)
- loop - start videoen fra starten, når den slutter
- preload - 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, får du en video, der fungerer i Firefox 3.5, Safari 4, Opera 10 og Chrome 1. Men hvad med Internet Explorer?
Internet Explorer kan ikke lide HTML 5 eller
I det næste afsnit vil vi snakke om, hvad du kan gøre for at få IE 8 til at spille pænt med dine HTML 5 video tags og vise en video. Du skal bruge Flash.Den gode nyhed er, at IE 9 forventes at understøtte HTML 5 og video tagget.
08 af 10Tilføj JavaScript og Flash Player for at få Internet Explorer til at fungere
Du har muligvis bemærket, at der i den forrige side HTML ikke var nogen kildelinje til FLV-filen. Og hvis du testede den pågældende side i Internet Explorer, ville det ikke fungere. Det skyldes, at Internet Explorer ikke genkender HTML 5, og det kan ikke afspille enten OGG eller MP4-videoer indbygget. For at få Internet Explorer 7 og 8 til at fungere, skal du have det til at afspille videoen som Flash. Men der er flere skridt til at få det til at fungere, end blot at tilføje FLV-filen.
Trin 1: Få en Flash Video Player til dit websted
Vi anbefaler at få FlowPlayer, fordi det er en open source Flash-videoafspiller, som du kan installere på din webserver og bruge, når du har Flash-video til at afspille. Den gratis version af FlowPlayer indsætter reklame for dine videoer, men du kan også købe kommercielle licenser, hvis du har brug for dem.
Følg instruktionerne på FlowPlayer-webstedet for at installere FlowPlayer på din hjemmeside. I en nøddeskal installerer du 2 SWF-filer og en JavaScript-fil på dit websted. Nederst i din HTML, (før tag) du tilføjer en linje:
Men Internet Explorer vil stadig ikke afspille videoen, du skal lære det, hvordan man genkender HTML 5-tags.
Trin 2: Overbevise Internet Explorer for at læse HTML 5 Tags
Der er et praktisk script på Google Code kaldet "HTML Shiv", der vil hjælpe IE genkende HTML 5 elementer. Så i
af dit HTML-dokument, du vil referere det til. Det er bedst at vedlægge det i IE betingede kommentarer, så andre browsere ikke er forvirrede:
Okay, nu vil IE genkende
