Hur man arbetar med HTML-video

Sep 11, 2025
Hur

Flytta över YouTube ... med & LT; Video & GT; element och lite Javascript , Du kan börja skapa din egen videosida. Videoelementet är ganska enkelt att använda, men den verkliga effekten kommer när du kombinerar den med JavaScript, vilket ger dig en hög kontroll över spelarens beteende.

I den här handledningen täcker vi den grundläggande inställningen av en video, väljer filer för att spela upp och generera miniatyrer.

01. Skapa en grundläggande sida

Låt oss börja med en HTML-sidoposition. Vi behöver en enkel Div-struktur, vissa CSS för styling och, mest kritiskt, en skriptfil. Du märker att videoklippet är tom just nu, så det gör ingenting när du laddar sidan. Men vi ger det en id Så vi kan styra det med JavaScript. 

 & lt;! Doktype html & gt;
& lt; html & gt;
  & lt; huvud & gt;
  & lt; meta charset = 'UTF-8' / & GT;
  & LT; Titel & GT; Min HTML-videospelare & LT; / Titel & GT;
  & lt; länk rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "player.js" & gt; & lt; / script & gt;
  & LT; / Head & GT;
  & lt; kropp & gt;
  & lt; div id = "titel" & gt;
  & lt; H1 & GT; Välkommen till mitt videobibliotek! & LT; / H1 & GT;
Bläddra igenom videon nedan och klicka på den du vill spela.
  & lt; / div & gt;
  & lt; div id = "thumbnail-container" & gt;
  & lt; / div & gt;
  & lt; div id = "spelare-container" & gt;
  & lt; video id = "spelare" & gt;
  & lt; / video & gt;
  & lt; div id = "kontroller" & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & LT; / Body & GT;
  & lt; / html & gt;

02. Style sidan

Därefter börjar vi lägga till styling till sidan. Innan vi försöker göra alltför smart, låt oss börja med att lägga till grundläggande styling till ett par av våra div-element så saker ser lite mer respektabelt ut. 

 Body {
  Bakgrundsfärg: #cccccc;
  Font-familj: sans-serif;
}
# spelare-container {
  Marginal-vänster: Auto;
  marginal-höger: Auto;
  Bredd: 640px;
  Höjd: 480px;
  Bakgrundsfärg: # 538C99;
  Border-Radius: 20px;
}
#title {
  Marginal-vänster: Auto;
  marginal-höger: Auto;
  Bredd: 640px;
  Text-Justera: Center;
  Padding-top: 30px;
  Padding-Bottom: 50px;
  Bakgrundsfärg: # 538C99;
  Färg: # 333333;
  Border-Radius: 20px; }

03. Lägg till mer styling

Sakerna blir lite mer intressanta när vi kommer att stylta miniatyrbehållaren Div. Vi ska fylla detta med img Elements, som kommer att bli miniatyrer genererade från våra videoklipp. Därför vill vi att den ska visa en horisontell rullningsfält om vi har mer miniatyrer än det kan visa på en gång. Vi kan göra det med hjälp av överflöde-x fast egendom. 

 # thumbnail-container {
  Bakgrundsfärg: #cccccc;
  Margin-top: 30px;
  Marginal-vänster: Auto;
  marginal-höger: Auto;
  Bredd: 640px;
  Höjd: 120px;
  Overflow-X: Scroll;
  överflöde-y: dold;
  Vitrummet: Nowrap;
  Border-Radius: 20px; }

04. Storlek på videospelaren på lämpligt sätt

Det är en mer bit av styling vi behöver göra. Som det är, när vi börjar spela upp videor, kommer de att visa vad som helst den ursprungliga upplösningen är. Detta kommer inte att se bra ut på sidan. Låt oss stila videoelementet för att bestämma hur stor det borde vara. Om vi ​​sätter sin bredd och höjd till 100%, kommer det bara att fylla den som innehåller div. 

 VIDEO {
  Bredd: 100%;
  Höjd: 100%; }

05. Ställ in skriptet

Det är dags att komma ner till JavaScript. Låt oss förbereda en lista över videofiler i en array för att det ska fungera med (vi har svårt för nu, men du kan försöka konfigurera den för att hämta via JSON från en HTTP-tjänst).

Vi definierar också ett par variabler som vi kommer att använda senare: " spelare "Kommer att vara videoelementet; ' spelare "Kommer att bli ett nyskapat källelement som blir ett barn i spelarens objekt senare, och pekar på källfiler. Vi planerar också att koppla in i en Domcontentloaded händelse för att se till att skriptet väntar på sidan att ladda innan du sparkar till handling. 

 VAR Videofiles = ["1.mp4", "2MP4", "3MP4", "4MP4", "5.MP4"];
Var spelare;
Var Playesource = document.createelement ("källa");
document.addeventlistener ("Domcontentloaded", funktion () {Initialise ();}, False);

Observera att videouppspelning i webbläsaren är beroende av närvaron av en codec som kan läsa det videoformat du använder. För att säkerställa att din videoproces-webbläsare är den säkraste insatsen MP4-filer med hjälp av H.264 codec.

06. Generera en miniatyrbild

Nästa Låt oss skapa en funktion som genererar en bild miniatyrbild från en videofil. Vi vill att detta ska ta ett videobjekt och returnera ett bildobjekt. Internt, hur vi kommer att uppnå detta använder Html canvas . 

 Funktion generatetumbnail (video) {
  Var canvas = document.createelement ("canvas");
  var container = document.getelementby ("miniatyrbehållare");
  Var Bredd = Container.ClientWidth;
  Varhöjd = container.ClientHeight;
  canvas.width = (Bredd / 3);
  canvas.height = höjd;
  canvas.getContext ("2D"). Draptid (video, 0, 0, kanfas.bränn, kanfas.höjd);
  Var Image = Document.CreateLement ("IMG");
  image.src = canvas.todataurl ();
  returnera bilden; }

07. Generera automatiskt miniatyrbilder som videoklipp är laddade

Nu kan vi ta funktionen Generatethumbnail och använda den på var och en av videofilerna i vår lista. Låt oss göra det genom att implementera Initialisera () fungera. Den här funktionen lägger till Placesource-objektet som ett barn i videoelementet, sedan iterera genom varje fil i listan, ladda den i ett temporärt videoobjekt, och en gång laddat, generera en miniatyrbild och lägg den till miniatyrbehållaren. 

 Funktion Initialisera () {
  spelare = document.getelementbyid ("spelare");
  Player.appendchild (Playerource);
  Player.Controls = False;
  Videofiles.foreach (funktion (fil) {
  var thumbsource = document.createelement ("källa");
  Thumbsource.src = fil;
  var thumbvideo = document.createelement ("video");
  Thumbvideo.AddeventListener ("LoadedData", funktion () {
  var container = document.getElementby ("miniatyrbehållare")
  Var Image = Generatethumbnail (Thumbvideo);
  container.appendchild (bild);
  }, falska);
  Thumbvideo.appendchild (Thumbsource);
  }); }

08. Lägg till länkar till miniatyrerna

Det är dock något som saknas. Våra miniatyrer visas i behållaren, men ingen av dem är klickbara. Vi måste fälla bilderna i en & lt; A & GT; Element, som behöver utföra lite javascript när de klickas. Låt oss justera funktionen som är ansluten till loadedData händelse att skapa länkarna också, istället för bara img element. 

 Thumbvideo.AddeventListener ("LoadedData", funktion () {
  var container = document.getElementby ("miniatyrbehållare")
  Var Image = Generatethumbnail (Thumbvideo);
  Var länk = document.createelement ("a");
  link.href = "javascript: Play (\" "+ thumbsource.src +" \ ")";
  länk.appendchild (bild);
  container.appendchild (länk);
  },
falskt);

09. Spela en video

Nu genererar vi miniatyrbilder med klickbara länkar, som är inrättade för att åberopa Spela (Thumbsource.Src) , var Thumbsource.src pekar på filnamnet för den relevanta videofilen. Allt som återstår är att implementera spelfunktionen för att ställa upp Playersource (som du kommer ihåg att vi kopplat till videospelarens element) för att peka på rätt fil och sparka upp uppspelningen. 

 Funktion Spela (URL)
{
  PlayerOurce.SRC = URL;
  Player.Controls = True;
  spelare.last ();
  player.play ();
}

Denna artikel uppträdde ursprungligen i utgåva 266 av webbdesignern, den kreativa webbdesignmagasinet - som erbjuder experthandledning, spetskantstrender och gratis resurser. Köp utgåva 266 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

  • Så här driver du upp dina menyer med CSS-animering
  • 16 fantastiska HTML-exempel
  • 9 av de bästa resurserna för att lära sig HTML och CSS

Hur - Mest populära artiklar

Cinema 4D Tutorials: 13 av det bästa

Hur Sep 11, 2025

Cinema 4D Tutorials: Snabblänkar Nagla grunderna Går längre Dessa Cinema 4D-tutorials hjälper dig att skapa l..

Hur man kitbash på språng med Shapr3d

Hur Sep 11, 2025

(Bildkredit: Adam Dewhirst) Shapr3d är ett utmärkt verktyg för Kitbashing. Det hjälper till att bokstavligen bash..

Hur man målar en Elven Maiden

Hur Sep 11, 2025

I den här handledningen ska jag vägleda dig genom min process för att skapa ett fängslande fantasistående av en Elven Maiden..

Hur man designar isometrisk typografi

Hur Sep 11, 2025

Perspektiv är allt i design. Om något du har ritat har ett perfekt perspektiv, hjälper det ditt arbete att se mer realistiskt ..

Hur man behärskar varelseanatomi

Hur Sep 11, 2025

När det kommer till teckna trovärdiga varelser , Du måste fokusera på skelett-, muskelsystem och kärlsystem. ..

4 steg till bättre vdm med zbrush

Hur Sep 11, 2025

Frilans 3d konstnär och vertex panelist Maya Jermy visar hur man behärskar VDM. Hon kommer att dyka upp på ..

Måla ett furigt husdjursporträtt

Hur Sep 11, 2025

Vår färdiga kattporträtt Målar husdjur och dragdjur kan vara mycket roligt. Medan det är k..

Hur man designar en animerad hjälte

Hur Sep 11, 2025

Följande tips bryter ner min process för att animera BINK för Eric Miller Animation Studios kommande webbserie. Bink är en nyfiken liten sjöfart varelse som fångades och tas till ett te..

Kategorier