I den första av hans bloggar för PC Pro , webbutvecklare Ian Devlin avslöjar hur man bäddar in video på din webbplats med HTML5
flytta filer från en Google-enhet till en annan
Förmodligen den största och mest omtalade funktionen i HTML5 är inbäddad video. För närvarande är den enda metoden för att lägga till videoinnehåll på din webbplats med ett tredje parts plugin som Flash, QuickTime eller RealPlayer. Med början av HTML5 och videoelementet kommer allt detta att förändras, med videostöd som hanteras av webbläsaren, vilket avskaffar behovet av tredje parts support.
Flera webbläsare erbjuder redan stöd för HTML5. Här kommer vi att avslöja hur du kan bädda in plugin-fri video på din webbplats och de problem du kommer att möta.
Filtyper och webbläsarkompatibilitet
Till att börja med tar vi en kort titt på de olika videofiltyperna som stöds i HTML5. Dessa är Theora OGG och H.264 (.mp4). Olika webbläsare stöder olika typer, och vissa stöder ingen alls. Följande tabell indikerar detta:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Codecs och andra tekniska problem
HTML5 i sig anger inte en videokodek som ska användas, och detta har lett till argument om vilka det bästa att använda på webben . Så för att täcka alla webbläsare måste vi stödja båda koderna.
Och så finns det naturligtvis Internet Explorer. För närvarande stöder ingen av de släppta versionerna av Internet Explorer videoelementet och ett plugin krävs fortfarande för att spela upp video. Detta kommer att förändras med lanseringen av Internet Explorer 9 (troligtvis i början av nästa år), när H.264 kommer att stödjas, tillsammans med många andra HTML5-godsaker.
Om du undrar hur du kan konvertera dina videofiler till OGG (du kan läsa mer om Theora OGG-typen på TheoraCookbook ) filer med Miro Video Converter .
För mer ingående information om videoelementet och codecs, gå över till dyka in i html5: video på webben av Mark Pilgrim.
HTML5-kod
Nu går vi vidare till den faktiska HTML5-koden och hur vi kan få saken att fungera. HTML5 ger oss två nya element som vi kan använda för att lägga till video på våra webbsidor: element, som vi redan har nämnt, och element. Låt oss titta på var och en av dessa i tur och ordning.
Elementet
Videoelementet kan ha följande attribut:
| Attribut | Beskrivning |
|---|---|
| src | en giltig URL till själva videofilen |
| autospela | en boolean som anger om videon ska spelas upp automatiskt |
| kontroller | en boolean som indikerar att standardmediekontrollerna ska visas av webbläsaren |
| slinga | en boolean som anger om videon ska spelas upprepade gånger |
| förspänning | indikerar för webbläsaren om förebyggande nedladdning av själva videon krävs, eller om metadata ensam är allt som behövs. Möjliga värden är:
|
| affisch | URL till en bildfil som ska visas när ingen videodata finns tillgänglig |
| bredd | bredden på videon, i CSS-pixlar |
| höjd | höjden på videon, i CSS-pixlar |
Från detta kan man se hur enkelt det är att bädda in en OGG-video på din webbplats med enbart videoelementet:
Det är verkligen allt som finns i det.
Alla webbläsare som stöder Theora OGG-formatet ska nu framgångsrikt visa och spela upp din video utan vidare. Naturligtvis är det inte så enkelt som det, för som vi har sett från tabellen ovan skulle koden bara fungera i Firefox, Chrome och Opera. Så vi måste också ha en reserv till H.264. Detta kan uppnås med element, vilket gör att vi kan definiera flera mediekällor för videoelementet.
hur man stoppar uppdateringar av Windows 10
Elementet
Källelementet har följande attribut:
| Attribut | Beskrivning |
|---|---|
| src | en giltig URL till själva mediefilen (i detta fall video) |
| typ | typen av mediefil som måste vara a MIME-typ , t.ex. type='video/ogg' indikerar att det är en Theora OGG-video, och du kan också tillhandahålla MIME-codec för att hjälpa webbläsaren att bestämma hur du ska spela upp videon med type='video/ogg; codecs='theora, vorbis'. |
| halv | ger mediaresursens avsedda medietyp och måste vara giltig mediefråga , t.ex. media='handheld' indikerar att videon är lämplig för handhållna enheter eller media='all and (min-device-height:720px)' vilket indikerar att videon är lämplig för skärmar med 720 pixlar eller mer. |
Obs: att källelementet är ogiltigt och har en starttagg men ingen stängningstagg
Det mest användbara med källelementet är att vi kan använda det för att stapla de olika filtyperna, så att webbläsaren kan prova var och en tills den hittar en som den kan spela.
Använda och tillsammans
För att stapla videor i olika typer inom videoelementet anger vi koden enligt följande:
Your browser does not support the video element.
Ovanstående kod fungerar nu i alla webbläsare utom Internet Explorer, som visar meddelandet som anges ovan.
Du kan testa detta själv genom att titta på HTML5-testvideosidan, som innehåller ett exempel på en fjäril i både Theora OGG- och MP4-format, så om du tittar på det i Firefox, Chrome, Safari, Opera eller på iPhone eller en Android-telefon, du borde kunna se den.
De skarpa knivarna bland er kommer nu att märka att vi kan dra nytta av denna stapling och ha en reserv till Flash (eller något annat plugin) längst ner istället för att visa en ledsen att du inte kan se detta videomeddelande genom att använda följande kod :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Slutsats
Som med de flesta HTML5-element är webbläsarstöd för käll- och videoelement för närvarande ojämnt. Det pågår för närvarande en stor debatt om källelementet kommer att döda användningen av Flash som den mest populära metoden för att lägga till videoinnehåll till webbplatser. Jag är inte säker på att det kommer att döda Flash helt, men ändå tycker jag att det är rättvist att säga att det är här för att stanna och kommer att ge webbutvecklare en renare och enklare metod för att bädda in video.
