Miten työskennellä HTML-videota

Sep 11, 2025

Miten tehdään

Siirrä YouTuben yli & lt; video & gt; elementti ja vähän JavaScript , voit aloittaa oman videosarjan. Videoelementti on melko suoraviivainen käyttää, mutta todellinen voima tulee, kun yhdistät sen JavaScriptille, mikä antaa sinulle korkean hallinnan pelaajan käyttäytymisestä.

Tässä opetusohjelmassa kattaamme videon perusasetukset, valitsemalla tiedostot toistettavaksi ja tuottavat pikkukuvia.

01. Luo perussivun

Aloitetaan HTML-sivun ääriviiva. Tarvitsemme yksinkertaisen DIV-rakenteen, joitain CSS: tä muotoiluun ja kriittisesti kirjoitustiedostoon. Huomaat, että videotunniste on tyhjä juuri nyt, joten ei tee mitään, kun lataat sivun. Annamme kuitenkin sen id Joten voimme hallita sitä JavaScriptin kanssa.

 & lt;! Opi HTML & GT;
& lt; html & gt;
  & lt; pää & gt;
  & lt; Meta Charset = 'UTF-8' / & GT;
  & lt; otsikko & gt; minun HTML Video Player & Lt; / Otsikko & GT;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "soitin.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; body & gt;
  & lt; div id = "otsikko" & gt;
  & lt; h1 & gt; Tervetuloa videokirjastoon! & lt; / h1 & gt;
Selaa alla olevia videoita ja napsauta sitä, mitä haluat toistaa.
  & lt; / div & gt;
  & lt; div id = "thumbnail-kontti" & gt;
  & lt; / div & gt;
  & lt; div id = "soittimen kontti" & gt;
  & lt; video id = "soitin" & gt;
  & lt; / video & gt;
  & lt; div id = "Ohjaus" & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / body & gt;
  & lt; / html & gt;

02. Tyyli sivu

Seuraavaksi aloitamme muotoilun lisäämisen sivulle. Ennen kuin yritämme tehdä jotain liian älykäs, aloitetaan lisäämällä perusmuotoilua pari meidän div elementtejä, joten asiat näyttävät hieman kunnioittavampaa.

 Body {
  Tausta-väri: #cccccc;
  Fontti-perhe: Sans-Serif;
}
# pelaaja kontti {
  marginaali vasemmalle: auto;
  Marginaali-oikeus: auto;
  Leveys: 640px;
  Korkeus: 480px;
  Tausta-väri: # 538C99;
  Border-RADIUS: 20PX;
}
#Title {
  marginaali vasemmalle: auto;
  Marginaali-oikeus: auto;
  Leveys: 640px;
  Teksti-kohdistus: keskus;
  PADDING-TOP: 30PX;
  Padding-pohja: 50px;
  Tausta-väri: # 538C99;
  Väri: # 333333;
  Border-RADIUS: 20PX; }

03. Lisää muotoilua

Asiat tulevat hieman mielenkiintoisemmiksi, kun tulemme tyylikkään thumbnail-kontin div. Aiomme täyttää tämän img elementtejä, jotka tulevat videoidemme tuottamat pikkukuvat. Siksi haluamme sen näyttää horisontaalisen vierityspalkin, jos meillä on enemmän pikkukuvia kuin se voi näyttää kerralla. Voimme tehdä tämän käyttämällä Overflow-X Omaisuus.

 # Thumbnail-kontti {
  Tausta-väri: #cccccc;
  marginaali: 30px;
  marginaali vasemmalle: auto;
  Marginaali-oikeus: auto;
  Leveys: 640px;
  Korkeus: 120px;
  Overflow-X: Selaa;
  Overflow-Y: piilotettu;
  Valkoinen tila: Nowrap;
  Border-RADIUS: 20PX; }

04. Koko videosoitin asianmukaisesti

Meidän on tehtävä vielä yksi vähän muotoilua. Kuten se on, kun aloitamme videoita, he näyttävät mihin tahansa alkuperäiseen resoluutioaan. Tämä ei näytä hyvältä sivulla. Tyydimme videoelementin määrittämään, kuinka suuri sen pitäisi olla. Jos asetamme sen leveys ja korkeus 100 prosenttiin, se täyttää vain div.

 Video {
  Leveys: 100%;
  Korkeus: 100%; }

05. Aseta käsikirjoitus

On aika päästä alas JavaScriptiin. Valmistetaan luettelo videotiedostoista, jotta se voi työskennellä (me kovaa koodia nyt, mutta voit yrittää määrittää sen hakea JSON: n http-palvelusta).

Määritämme myös pari muuttujaa, joita käytämme myöhemmin: " pelaaja "Videoselementti; " PlonesSource "On äskettäin luotu lähdeelementti, joka tulee pelaajan esineen lapsi myöhemmin ja osoittaa lähdetiedostot. Suunnimme myös koukkuun Domcontentlomattu Tapahtuma varmistaa, että komentosarja odottaa sivua lataamaan ennen kuin potkiminen toimintoihin.

 var VideoFiles = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5mp4"];
var-soitin;
var Playerource = dokumentti.createelement ("lähde");
Asiakirja.AddeventListener ("domcontentlomattu", toiminto () {Alusta ();}, FALSE);

Huomaa, että selaimen videotoisto perustuu koodekin läsnäoloon, joka voi lukea käyttämäsi videomuodon. Varmista, että video toimii risti-selaimella, turvallisin panos on MP4-tiedostoja H.264-koodekin avulla.

06. Luo pikkukuva

Seuraavaksi luodaan toiminto, joka tuottaa kuvan pikkukuvan videotiedostosta. Haluamme tämän ottaa video-objektin ja palauttaa kuva-objektin. Sisäisesti, miten saavutamme tämän käyttää HTML-kangas .

 Toiminto GenerateThumbNail (Video) {
  var Canvas = Document.createelement ("Canvas");
  var Container = document.gettelementbyID ("thumbnail-kontti");
  var leveys = kontti.clientwidth;
  var korkeus = kontti.clientheight;
  Canvas.width = (leveys / 3);
  canvas.height = korkeus;
  CANVAS.GETCONTEXT ("2D"). Vedä (video, 0, 0, Canvas.width, Canvas.height);
  var image = dokumentti.createelement ("img");
  image.src = canvas.todataurl ();
  palauta kuva; }

07. Luo automaattisesti pikkukuvat, kun videot on ladattu

Nyt voimme ottaa GenerateThumbnail-toiminnon ja käyttää sitä jokaisessa luettelossa olevista videotiedostoista. Tehdään tämä toteuttamalla Alusta () Toiminto. Tämä toiminto lisää PLAYERSOURCE-objektin videoelementin lapseeksi, itahtaa sitten jokaisen luettelon jokaisen tiedoston kautta, lataa se väliaikaiseen videokuvaan ja kerran ladataan, luo pikkukuva ja lisää se pikkukuvan säiliöön.

 Toiminto alustaa () {
  soitin = asiakirja.getelementbyid ("soitin");
  Player.Appendchild (Playureurce);
  Player.controls = False;
  VideoFiles.Foreach (toiminto (tiedosto) {
  var thumbsource = asiakirja.createelement ("lähde");
  thumbsource.src = tiedosto;
  var thumbvideo = dokumentti.createelement ("Video");
  thumbvideo.addeventListener ("ladadData", toiminto () {
  var Container = document.gettelementbyID ("thumbnail-kontti")
  var image = generateethumbnail (thumbvideo);
  kontti.Appendchild (kuva);
  }, väärä);
  thumbvideo.appendchild (thumbsource);
  }); }

08. Lisää linkkejä pikkukuviin

On kuitenkin jotain puuttuvaa. Pikkukuvat näkyvät säiliössä, mutta mikään niistä ei ole klikattavissa. Meidän on kääriä kuvia & lt; a & gt; elementti, joka tarvitsee suorittaa joitakin JavaScript, kun napsautat. Säädä toiminto koukussa LoadData Tapahtuman luominen myös linkit, sijaan vain img elementtejä.

 ThumbVideo.AdDeventListener ("LadatedData", Toiminto () {
  var Container = document.gettelementbyID ("thumbnail-kontti")
  var image = generateethumbnail (thumbvideo);
  Var LINK = Document.createelement ("A");
  LINK.HREF = "JavaScript: toisto (\" "+ thumbsource.src +" \ ")";
  Link.Appendchild (kuva);
  Container.Appendchild (Linkki);
  },
False);

09. Toista video

Nyt tuotamme pikkukuvia, joilla on napsautettavat linkit, jotka on perustettu Pelaa (thumbsource.src) , missä thumbsource.src osoittaa asiaankuuluvan videotiedoston tiedostonimi. Kaikki, mitä jäljellä on, on toteutettava Play-toiminto Set Playerource (jonka muistat, että olemme yhteydessä videon soittimen elementtiin), kun haluat osoittaa oikean tiedoston ja potkia toiston.

 Toimintopeli (URL)
{
  pelaajatOurce.src = URL;
  Player.controls = totta;
  Player.load ();
  soitin.play ();
}

Tämä artikkeli ilmestyi alunperin julkaisussa 266 Web-suunnittelija, Creative Web Design -lehti - tarjoamalla asiantuntija-opetusohjelmia, huippuluokan suuntauksia ja ilmaisia resursseja. Osta numero 266 Täällä tai Tilaa Web-suunnittelija tähän .

Aiheeseen liittyvät artikkelit:

Kuinka käynnistää valikot CSS-animaatiolla
16 Amazing HTML esimerkkejä
9 parhaiden resurssien oppimiseen HTML ja CSS

Miten työskennellä HTML-videota

01. Luo perussivun

02. Tyyli sivu

03. Lisää muotoilua

04. Koko videosoitin asianmukaisesti

05. Aseta käsikirjoitus

06. Luo pikkukuva

07. Luo automaattisesti pikkukuvat, kun videot on ladattu

08. Lisää linkkejä pikkukuviin

09. Toista video

Miten tehdään - Suosituimmat artikkelit

Miten testata reagoida sivustoja ja sovelluksia

Kuvan kokoaminen Photoshopissa

Master Photoshopin sekoittimen harja

Jump Start reagoi natiivi Expo

Kuinka suunnitella reagoivia ja laitteiden agnostisia muotoja

Luo digitaalinen etch a sketch

Käännä 2D-mallit 3D: ksi Project Felixilla

Miten tehdä fotorealistinen taivas

Luokat