Hogyan kell dolgozni a HTML videóval

Sep 14, 2025

kézikönyv

Mozgassa a YouTube-ot ... a & lt; video & gt; elem és egy kicsit JavaScript , elkezdheti létrehozni saját videó webhelyét. A videóelem meglehetősen egyszerűen használható, de az igazi teljesítmény akkor jön, amikor a JavaScript segítségével kombinálja, ami magas szintű irányítást ad a játékos viselkedésén keresztül.

Ebben a bemutatóban fedjük le a videó alapbeállítását, kiválasztva a fájlok lejátszásához és a miniatűrök generálásához.

01. Alapoldal létrehozása

Kezdjük egy HTML oldal vázlatával. Szükségünk lesz egy egyszerű DIV struktúrára, néhány CSS a styling és a legtöbb kritikus, egy szkriptfájl. Észre fogod venni, hogy a videó címke most üres, ezért semmit sem tesz, ha betölti az oldalt. Azonban adunk neki idézés Tehát a JavaScript segítségével irányíthatjuk.

 & lt;! Doctype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta Charset = 'UTF-8' / & gt;
  & lt; title & gt; Saját html video lejátszó & lt; / title & gt;
  & link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "player.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; test & gt;
  & lt; div id = "Cím" & gt;
  & lt; h1 & gt; Üdvözöljük a video könyvtárban! & LT; / h1 & gt;
Lapozzon az alábbi videókon, és kattintson a lejátszani kívánt elemre.
  & lt; / div & gt;
  & lt; div id = "thumbnail-konténer" & gt;
  & lt; / div & gt;
  & lt; div id = "játékos-konténer" & gt;
  & lt; video id = "lejátszó" & gt;
  & lt; / video & gt;
  & lt; div id = "vezérlők" & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / test & gt;
  & lt; / html & gt;

02. Stílus Az oldal

Ezután elkezdjük a stílushoz való hozzáadását az oldalhoz. Mielőtt megpróbálunk semmit túl okozni, kezdjük el az alapvető stílushoz egy pár div elemünket, így a dolgok kicsit tiszteletre méltóak.

 test {
  Háttérszín: #ccccccc;
  Font-Család: Sans-Serif;
}
# játékos konténer {
  margó-balra: Auto;
  Margin-Right: Auto;
  Szélesség: 640px;
  Magasság: 480px;
  Háttérszín: # 538C99;
  Border-sugara: 20px;
}
#title {
  margó-balra: Auto;
  Margin-Right: Auto;
  Szélesség: 640px;
  Text-Align: Center;
  Padding-Top: 30px;
  Padding alsó: 50px;
  Háttérszín: # 538C99;
  Szín: # 333333;
  Border-sugara: 20px; }

03. További stílusok hozzáadása

A dolgok kicsit érdekesebbé válnak, amikor eljutunk a bélyegkép-konténer div. Ezt meg fogjuk tölteni img Elemek, amelyek a videóinkból származó miniatűrök lesznek. Ezért azt szeretnénk, ha vízszintes görgetősávot jelenítünk meg, ha több miniatűrünk van, mint amennyit egyszerre mutathat. Ezt megtehetjük a túlcsordulás-x ingatlan.

 # thumbnail-konténer {
  Háttérszín: #ccccccc;
  Margin-Top: 30px;
  margó-balra: Auto;
  Margin-Right: Auto;
  Szélesség: 640px;
  Magasság: 120px;
  túlcsordulás-x: Görgetés;
  túlcsordulás-y: rejtett;
  Fehér tér: mostrap;
  Border-sugara: 20px; }

04. Mérje meg megfelelően a videolejátszót

Van még egy kis stílus, amit meg kell tennünk. Ahogy ez az, amikor elkezdjük lejátszani a videókat, megjeleníthetjük az őshonos felbontásukat. Ez nem fog jól nézni az oldalon. Stílusunk a videó elemet, hogy meghatározza, milyen nagy lehet. Ha a szélességét és a magasságot 100% -ig állítjuk be, akkor csak kitölti a div.

 Videó {
  Szélesség: 100%;
  Magasság: 100%; }

05. Állítsa be a szkriptet

Itt az ideje, hogy leálljon a JavaScriptbe. Készítsünk fel egy listát a videofájlok listájáról egy tömbben, hogy dolgozzon (most keményen kódoljuk, de megpróbálhatja konfigurálni azt, hogy a JSON-t egy HTTP szolgáltatásból letöltse).

Egy pár változót is meghatározunk, amelyet később használunk: " játékos "Lesz a videóelem; „ játékosok "Újonnan létrehozott forráselem lesz, amely később a játékos objektumának gyermeke lesz, és pont a forrásfájlokra. Azt is tervezünk, hogy összekapcsoljuk a Domcontentetted Esemény, hogy megbizonyosodjon arról, hogy a szkript várja az oldalt, hogy betölti az akciót.

 VAR VideoFiles = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4"];
var játékos;
var-játékosok = dokumentum.Createels ("forrás");
dokumentum.addeventlistener ("DOMCONTENTULDED", funkció () {inicialise ();}, FALSE);

Megjegyezzük, hogy videolejátszás a böngésző támaszkodik jelenlétében egy kodek, amely képes olvasni a video formátum, amit használ. Annak érdekében, hogy a videó működik cross-böngésző, a legbiztonságosabb megoldás az MP4 fájlokat a H.264 codec.

06. gránátot generál

Ezután hozzunk létre egy olyan funkciót, amely egy képbélyegzőt generál egy videofájlból. Azt akarjuk, hogy vegyenek be egy video objektumot, és visszatérjenek egy képobjektumot. Belsőleg, így fogjuk elérni ezt Html vászon .

 Funkció GenerateFumnail (videó) {
  var coras = document.createels ("vászon");
  VAR Container = Document.getElementbyid ("miniatűr-konténer");
  var szélesség = konténer.clientwidth;
  var magasság = konténer.clientHeight;
  vászon.width = (szélesség / 3);
  vászon.height = magasság;
  canvas.getcontext ("2d"). Rajz (videó, 0, 0, vászon.width, canvas.height);
  var image = document.createels ("img");
  image.src = canvas.todataurl ();
  visszatérő kép; }

07. Automatikusan generálja a miniatűröket videók betöltésekor

Most meg tudjuk venni a generateMumnail funkciót, és a listánk mindegyik videofájlon használhatjuk. Tegyük meg ezt a végrehajtásával inicializálás () funkció. Ez a funkció hozzáadja a Playsource objektumot a videóelem gyermekeként, majd az összes fájlon keresztül a listában töltse be, töltse be az ideiglenes videoobjektumba, és ha betöltötte, hozzon létre miniatűret, és adja hozzá a miniatűr tartályhoz.

 Funkció inicializálása () {
  Player = Document.getElementbyid ("Player");
  játékos.appendchild (játékosok);
  játékos.controls = FALSE;
  videofiles.foreach (funkció (fájl) {
  var thumbsource = dokumentum.Createels ("forrás");
  thumbsource.src = fájl;
  VAR Thumbvideo = Dokumentum.Createels ("Video");
  thumbvideo.addeventlistener ("loadeddata", funkció () {
  Var Container = Document.getElementbyid ("Thumbnail-Container")
  VAR Image = generateFumnail (thumbvideo);
  konténer.appendchild (kép);
  }, hamis);
  Thumbvideo.appendchild (thumbsource);
  }); }

08. Adjon hozzá linkeket a bélyegképekhez

Van még valami hiányzik. A miniatűrök megjelennek a tartályban, de egyikük sem kattintható. A képeket egy & lt; A & gt; Elem, amelynek meg kell végre kell hajtania néhány JavaScriptet, ha rákattint. Állítsuk be a csatlakoztatott funkciót a loadeddata esemény, hogy a linkeket is létrehozza, csaknem csak img Elemek.

 Thumbvideo.addeventlistener ("loadeddata", funkció () {
  Var Container = Document.getElementbyid ("Thumbnail-Container")
  VAR Image = generateFumnail (thumbvideo);
  var link = document.createels ("A");
  link.href = "JavaScript: lejátszás (\" "+ thumbsource.src +" \ ")";
  link.appendchild (kép);
  konténer.appendchild (link);
  },
hamis);

09. Videó lejátszása

Most generálunk miniatűrök kattintható linkekkel, amelyeket beállítanak play (thumbsource.src) , hol thumbsource.src rámutat a vonatkozó videofájl fájlnevére. Minden, ami továbbra is fennáll, hogy a lejátszási funkciót beállítsa a játékosok beállítása (amelyre emlékeztetni fogunk a videolejátszó elemre), hogy pontot mutatjon a megfelelő fájlra, és kiinduljon a lejátszáshoz.

 Funkció lejátszása (URL)
{
  playersource.src = URL;
  játékos.controls = igaz;
  Player.load ();
  játékos.play ();
}

Ez a cikk eredetileg a webes tervező, a Creative Web Design Magazine 266 számú kiadásában jelent meg, amely szakértői oktatóanyagokat, élvonalbeli trendeket és szabad erőforrásokat kínál. Itt vásároljon 266 kérdést vagy Iratkozzon fel itt a webdesignerre .

Kapcsolódó cikkek:

Hogyan kapcsolja fel a menüket a CSS animációval
16 Csodálatos HTML példák
9 a HTML és a CSS tanulásának legjobb forrásai közül 9

Hogyan kell dolgozni a HTML videóval

01. Alapoldal létrehozása

02. Stílus Az oldal

03. További stílusok hozzáadása

04. Mérje meg megfelelően a videolejátszót

05. Állítsa be a szkriptet

06. gránátot generál

07. Automatikusan generálja a miniatűröket videók betöltésekor

08. Adjon hozzá linkeket a bélyegképekhez

09. Videó lejátszása

kézikönyv - Most Popular Articles

Hogyan animálni a MO.JS könyvtárral

Affinity Designer: Hogyan kell használni a toll eszközt

Hozzon létre egy animált Steam szöveghatást

Jobb karakteres animációk létrehozása maya

Hogyan lehet elképesztő hatást létrehozni a CSS formákkal

A digitális eszközök használata kézzel rajzolt megjelenéshez

Hogyan lehet hozzáadni a szórakoztató CSS hátterét a webhelyeihez

Kártya alapú UI létrehozása alapozással

Kategóriák