Hoe te werken met HTML-video

Sep 11, 2025
Procedures

Verplaats over YouTube ... met The & LT; Video & GT; element en een beetje JavaScript , u kunt beginnen met het maken van uw eigen videosite. Het videodement is vrij eenvoudig te gebruiken, maar de echte kracht komt wanneer je het combineert met JavaScript, wat je een hoog niveau van controle geeft over het gedrag van de speler.

In deze tutorial bestrijken we de basisinstellingen van een video, het selecteren van bestanden om terug te spelen en miniaturen te genereren.

01. Maak een basispagina

Laten we beginnen met een HTML-paginaoverzicht. We hebben een eenvoudige div-structuur nodig, sommige CSS voor styling en, het meest kritisch, een scriptbestand. U zult merken dat het videotag nu leeg is, dus zal niets doen wanneer u de pagina laadt. We geven het echter een ID kaart Dus we kunnen het beheersen met JavaScript. 

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
  & LT; HOOFD & GT;
  & LT; Meta CharsSet = 'UTF-8' / & GT;
  & LT; TITLE & GT; mijn HTML-videospeler & LT; / TITLE & GT;
  & LT; LINK REL = 'Stylesheet' Href = 'Custom.css' / & GT;
  & lt; script SRC = "Player.js" & GT; & LT; / Script & GT;
  & LT; / HOOFD & GT;
  & LT; BODY & GT;
  & LT; DIV ID = "TITLE" & GT;
  & LT; H1 & GT; Welkom bij mijn videobibliotheek! & LT; / H1 & GT;
Blader door de onderstaande video's en klik op degene die je wilt spelen.
  & LT; / DIV & GT;
  & lt; div id = "thumbnail-container" & GT;
  & LT; / DIV & GT;
  & LT; DIV ID = "Player-Container" & GT;
  & LT; Video ID = "Player" & GT;
  & LT; / VIDEO & GT;
  & LT; DIV ID = "Controls" & GT;
  & LT; / DIV & GT;
  & LT; / DIV & GT;
  & LT; / BODY & GT;
  & LT; / HTML & GT;

02. Stijl de pagina

Vervolgens beginnen we styling toe te voegen aan de pagina. Voordat we proberen iets te slim te doen, laten we beginnen met het toevoegen van basisstyling aan een paar van onze div-elementen, zodat dingen er een beetje meer respecteerbaar uitzien. 

 lichaam {
  Achtergrondkleur: #CCCCCC;
  Font-familie: Sans-serif;
​
# speler-container {
  Margin-links: Auto;
  Margin-Right: Auto;
  Breedte: 640px;
  Hoogte: 480px;
  Achtergrondkleur: # 538C99;
  Border-Radius: 20px;
​
#title {
  Margin-links: Auto;
  Margin-Right: Auto;
  Breedte: 640px;
  Tekst-Uitlijnen: Centrum;
  Padding-top: 30px;
  Vading-bodem: 50px;
  Achtergrondkleur: # 538C99;
  Kleur: # 333333;
  Border-Radius: 20px; }

03. Voeg meer styling toe

Dingen worden een beetje interessanter wanneer we de miniatuur-container div. We gaan dit vullen met img elementen, die miniaturen zijn die uit onze video's zijn gegenereerd. Daarom willen we dat het een horizontale schuifbalk weergeeft als we meer miniaturen hebben dan tegelijkertijd kan worden weergegeven. We kunnen dit doen met behulp van de overflow-x eigendom. 

 # miniatuur-container {
  Achtergrondkleur: #CCCCCC;
  Margin-top: 30px;
  Margin-links: Auto;
  Margin-Right: Auto;
  Breedte: 640px;
  Hoogte: 120px;
  overflow-x: scroll;
  overflow-y: verborgen;
  White-Space: Nowrap;
  Border-Radius: 20px; }

04. Grootte de videospeler op de juiste manier

Er is nog een beetje styling dat we moeten doen. Zoals het is, wanneer we beginnen met het afspelen van video's, zullen ze weergeven op wat hun native resolutie is. Dit zal er niet goed uitzien op de pagina. Laten we het videodelement instellen om te bepalen hoe groot het zou moeten zijn. Als we de breedte en hoogte opstellen tot 100%, vult het gewoon de bevattende div. 

 Video {
  Breedte: 100%;
  Hoogte: 100%; }

05. Stel het script in

Het is tijd om naar het JavaScript te gaan. Laten we een lijst met videobestanden in een array voorbereiden om mee te werken (we zullen voor nu moeilijk zijn, maar u kunt proberen het te configureren om via JSON uit een HTTP-service op te halen).

We definiëren ook een paar variabelen die we later zullen gebruiken: ' speler 'Zal het videodelement zijn;​ spelersource 'Wordt een nieuw ingeschreven bronelement dat later een kind van het spelerobject wordt, en wijzen op bronbestanden. We zullen ook van plan zijn om in een te haken Domcontentloaded Evenement om ervoor te zorgen dat het script wacht op de pagina om te laden voordat u in actie wordt geschopt. 

 Var Videofiles = ["1.MP4", "2.MP4", "3.MP4", "4.MP4", "5.MP4"];
var-speler;
Var PlayerSource = Document.CreatoreLement ("Bron");
Document.AddEventListener ("Domcontentloaded", functie () {initialiseer ();}, false);

Merk op dat het afspelen van video in de browser afhankelijk is van de aanwezigheid van een codec die het videoformaat kan lezen dat u gebruikt. Om ervoor te zorgen dat uw Video-werken Cross-Browser, is de veiligste inzet MP4-bestanden met behulp van de H.264-codec.

06. Genereer een miniatuur

Laten we vervolgens een functie maken die een afbeeldingsminiatuur van een videobestand genereert. We willen dat dit een video-object inneemt en een beeldobject retourneert. Intern, de manier waarop we dit zullen bereiken, gebruikt Html canvas ​ 

 Functie-generatethumbnail (video) {
  var canvas = document.createeLement ("canvas");
  Var-container = document.getelementByID ("thumbnail-container");
  var breedte = container. Clientbreedte;
  var hoogte = container.clientheight;
  canvas.width = (breedte / 3);
  canvas.Height = hoogte;
  Canvas.getContext ("2D"). Trekbaar (video, 0, 0, canvas.width, canvas.hoogte);
  Var Image = Document.CreateElement ("IMG");
  afbeelding.src = canvas.todataurl ();
  retourafbeelding; }

07. Genereer automatisch miniaturen als video's worden geladen

Nu kunnen we de generatethumbnail-functie maken en gebruiken op elk van de videobestanden in onze lijst. Laten we dit doen door de initialiseer () functie. Deze functie voegt het Player Source-object toe als een kind van het videogelement, en vervolgens op elk bestand in de lijst, laadt het in een tijdelijk videobestand en eenmaal geladen, genereer een miniatuur en voeg deze toe aan de miniatuurcontainer. 

 Functie initialiseren () {
  speler = document.getelementByID ("speler");
  speler.appdchild (spelersource);
  speler.controls = false;
  videofiles.forreach (functie (bestand) {
  Var thumbsource = document.createeLement ("bron");
  thumbsource.src = bestand;
  var thumbvideo = document.createeLement ("video");
  thumbvideo.AddevenListener ("LoadedData", functie () {
  Var container = document.getelementByID ("thumbnail-container")
  Var-afbeelding = generatethumbnail (thumbvideo);
  container.Appendchild (afbeelding);
  }, false);
  thumbvideo.appdchild (thumbsource);
  ​}

08. Voeg links toe aan de miniaturen

Er ontbreekt echter wel iets. Onze miniaturen verschijnen in de container, maar geen van hen is klikbaar. We moeten de afbeeldingen in een & LT; A & GT; element, dat een javascript moet uitvoeren wanneer erop is geklikt. Laten we de functie aanpassen aan de LoadedData evenement om de links ook te maken, in plaats van alleen img elementen. 

 Thumbvideo.AddevenListener ("LoadedData", functie () {
  Var container = document.getelementByID ("thumbnail-container")
  Var-afbeelding = generatethumbnail (thumbvideo);
  VAR-koppeling = document.createeLement ("A");
  link.href = "JavaScript: afspelen (\" "+ thumbsource.src +" \ ")";
  link.appdchild (afbeelding);
  container.Aptdchild (link);
  ​
false);

09. Speel een video

Nu genereren we miniaturen met klikbare links, die zijn ingesteld om aan te roepen Spelen (thumbsource.src) , waar thumbsource.src wijst op de bestandsnaam van het relevante videobestand. Het enige dat overblijft is om de speelfunctie te implementeren om spelersource in te stellen (die u zult herinneren die u hebt gekoppeld aan het element van de videospeler) om naar het juiste bestand te wijzen en het afspelen af ​​te starten. 

 Functie Play (URL)
​
  spelersource.src = URL;
  speler.controls = true;
  speler.load ();
  speler.play ();
}

Dit artikel verscheen oorspronkelijk in uitgifte 266 van Web Designer, het Creative Web Design Magazine - met deskundige tutorials, geavanceerde trends en gratis middelen. Koop hier een probleem 266 of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

  • Hoe uw menu's uit te schakelen met CSS-animatie
  • 16 Verbazingwekkende HTML-voorbeelden
  • 9 van de beste middelen voor het leren van HTML en CSS

Procedures - Meest populaire artikelen

Compositing in animatie: leer de basis

Procedures Sep 11, 2025

(Afbeelding Credit: Blackmagic Design) In dit artikel zullen we verdiepen in de kunst van compositing voor 3D. Het ve..

Is uw Apple iCloud-opslag vol? Hier is hoe ruimte vrij te maken

Procedures Sep 11, 2025

(Afbeelding Credit: Apple) De iCloud-service van Apple is een van de Beste cloud-opslag Producten rond..

Creëer geïllustreerde portretten van foto's

Procedures Sep 11, 2025

Ik studeerde beeldende kunst en Schilderstechnieken En voor een lange tijd was volledig tegen het idee om digitaal..

Hoe isometrische typografie ontwerpen

Procedures Sep 11, 2025

Perspectief is alles in ontwerp. Als iets dat je hebt getekend een perfect perspectief heeft, zal het je werk helpen realistische..

Scherp uw schetsende vaardigheden

Procedures Sep 11, 2025

Schetsen is een eenvoudig maar krachtig hulpmiddel voor iedereen die betrokken is bij het maken van digitale producten. Pennen, papier en whiteboards zijn gemakkelijk verkrijgbaar..

Maak een geanimeerde gif in Photoshop

Procedures Sep 11, 2025

Adobe lanceert een nieuwe reeks video-tutorials die vandaag de dag wordt genoemd, waardoor u wilt schetsen hoe u specifieke ontwerpprojecten kunt maken met behulp van verschillende Cr..

Maak een harig 3D-personage van nul

Procedures Sep 11, 2025

Het maken van een bontkarakter kan eenvoudig zijn, maar als u een echt aantrekkelijk stuk harig wilt maken 3d kunst ..

Ontdek creatieve code met P5.JS

Procedures Sep 11, 2025

Doorbrengen met Brendan Dawes Bij Genereer Londen en o..

Categorieën