Huvud Smartphones Lägga till video till din webbplats med HTML5

Lägga till video till din webbplats med HTML5



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

none

none

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 OGGH.264 (mp4)
Firefox 3.5+x
Chrome 3+
Safari 3+x
Opera 10.5+x
Internet Explorer 8xx
Internet Explorer 9x
iPhonex
Androidx

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:

AttributBeskrivning
srcen giltig URL till själva videofilen
autospelaen boolean som anger om videon ska spelas upp automatiskt
kontrolleren boolean som indikerar att standardmediekontrollerna ska visas av webbläsaren
slingaen boolean som anger om videon ska spelas upprepade gånger
förspänningindikerar 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:

  • ingen - indikerar att videon inte ska laddas förut (eftersom det förmodligen inte krävs)
  • metadata - videon kommer troligen inte att krävas men det är metadata (t.ex. dimensioner, varaktighet) önskvärt
  • auto - informerar webbläsaren om att försöka ladda ner hela videon
  • (tom sträng) - betyder samma som auto
affischURL till en bildfil som ska visas när ingen videodata finns tillgänglig
breddbredden på videon, i CSS-pixlar
höjdhö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:

AttributBeskrivning
srcen giltig URL till själva mediefilen (i detta fall video)
typtypen 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'.
halvger 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.

Intressanta Artiklar

Redaktionen

none
Chromecast vs. Firestick – vilket ska du köpa?
Enheter som Google Chromecast och Amazon Firestick förändrar helt hur alla ser och använder sina TV-apparater. Med tanke på de många streamingenheterna nu kan det vara svårt att avgöra vilken man ska köpa. Du är inte ensam om den här känslan. Medan
none
Hur man får Windows 10 att be om användarnamn och lösenord under inloggningen
Så här kan du få Windows 10 att be dig att skriva in användarnamnet och sedan lösenordet på inloggningsskärmen.
none
Super Mario Odyssey-recension: Marios globetrotting-äventyr visar att Nintendo inte har tappat sin magi
none
Så här redigerar du mediataggar i Windows 10
I Windows 10 kan du redigera mediataggar för vanliga mediefilformat utan att använda tredjepartsappar. I den här artikeln kommer vi att se hur det kan göras.
none
Hur man lägger till Amazon Prime Video till Roku
Vill du lägga till Amazon Prime Video till Roku? Har du problem med att spela upp innehåll via kanalen? Vill du veta ett sätt att få det att fungera så att du kan fortsätta med visningen? Denna handledning kommer att visa dig allt det och
none
Så här ändrar du en bild på din låsskärm i Windows 10
Windows 10 har många inbyggda personaliseringsalternativ och mer kan läggas till med några noggrant utvalda program. Jag brukar hålla mig till standardväljaren eftersom den fungerar bra och inte använder för många resurser.
none
Så här tar du bort appar från en Chromebook
Det finns många fördelar med att använda en Chromebook över en bärbar dator, inklusive enkel hantering av appar. Ända sedan Chrome OS integrerades med Android OS har den här processen blivit enklare. Du kan lägga till och ta bort appar i några steg