Jak pracovat s HTML Video

Sep 14, 2025
jak

Přesuňte se nad YouTube ... s & lt; video & gt; Prvek a trochu JavaScript. , Můžete začít vytvořit vlastní video stránky. Video prvek je poměrně jednoduchý, který má být používán, ale skutečná moc přichází, když ji kombinujete s JavaScriptem, který vám dává vysokou úroveň kontroly chování hráče.

V tomto tutoriálu pokrýváme základní nastavení videa, výběr souborů pro přehrávání a generování miniatur.

01. Vytvořte základní stránku

Pojďme začít s obrysem HTML stránky. Budeme potřebovat jednoduchou strukturu DIV, některé CSS pro styling a nejvíce kriticky, soubor skriptu. Všimněte si, že video značka je prázdná právě teď, takže nebude dělat nic, když načtete stránku. Dáváme to však ID Takže můžeme ovládat JavaScript. 

 Doctype HTML & GT;
& lt; html & gt;
  & lt; hlava & gt;
  & lt, meta charset = 'utf-8' / gt;
  & lt, titul & gt; můj html video přehrávač & lt; / titul & gt;
  & lt, link rel = 'styl styl' href = 'custom.css' / gt;
  & lt; skript SRC = "Player.js" & gt; & lt; / script & gt;
  & lt; / hlava & gt;
  & lt; tělo & gt;
  & lt, div id = "titul" & gt;
  & lt, h1 & gt; vítejte v mé video knihovně! & lt; / h1 & gt;
Vyhledejte níže uvedenou videa a klepněte na ten, který chcete přehrát.
  & lt; / div & gt;
  & lt, div id = "miniatura-kontejner" & gt;
  & lt; / div & gt;
  & lt, div id = "hráč-kontejner" & gt;
  & lt, video id = "hráč" & gt;
  & lt; / video & gt;
  & lt, div id = "kontroly" & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / tělo & gt;
  & lt; / html & gt;

02. Styl stránky

Dále začneme přidávat styling na stránku. Než se snažíme udělat něco příliš chytrého, začněme přidáním základního stylu na pár našich prvků DIV, takže věci vypadají trochu slušněji. 

 Tělo {
  Barva pozadí: #cccccc;
  Font-family: sans-serif;
}
# přehrávač-kontejner {
  MARGIN-LEFT: AUTO;
  Právo okraje: Auto;
  šířka: 640px;
  Výška: 480px;
  Barva pozadí: # 538C99;
  okruh pohraničí: 20px;
}
#title {
  MARGIN-LEFT: AUTO;
  Právo okraje: Auto;
  šířka: 640px;
  Text-ALIGN: CENTER;
  Padding-top: 30px;
  Polstrování-dno: 50px;
  Barva pozadí: # 538C99;
  Barva: # 333333;
  okruh pohraničí: 20px; }

03. Přidat další styling

Věci se stávají o něco zajímavější, když přijdeme do stylu miniatury-kontejner Div. Zaplníme to img. Prvky, které budou miniatury generovány z našich videí. Chceme proto, aby zobrazovala horizontální posuvník, pokud máme více miniatur, než se může ukázat najednou. Můžeme to udělat pomocí Přetečení-X. vlastnictví. 

 # thumbnail-kontejner {
  Barva pozadí: #cccccc;
  Margin-top: 30px;
  MARGIN-LEFT: AUTO;
  Právo okraje: Auto;
  šířka: 640px;
  Výška: 120px;
  Přetečení-X: Scroll;
  Přetečení-y: Skrytý;
  Bílý prostor: Nowrap;
  okruh pohraničí: 20px; }

04. Velikost videa správně

Je tu ještě jeden kousek stylu, které musíme udělat. Jak to je, když začneme hrát videa, budou zobrazovat na jakékoli jejich rodné rozlišení. To nebude vypadat dobře na stránce. Pojďme styl video prvek určit, jak velký by měl být. Pokud nastavíme jeho šířku a výšku na 100%, bude to jen naplnit jeho Div. 

 Video {
  šířka: 100%;
  výška: 100%; }

05. Nastavte skript

Je čas se dostat dolů do JavaScriptu. Pojďme připravit seznam video souborů v poli pro to, aby pracoval (budeme tvrdý kód, ale mohli byste jej vyzkoušet konfiguraci, aby se načíst přes JSON ze služby HTTP).

Definujeme také pár proměnných, které budeme používat později: " hráč "Bude video prvkem; " Hráčeource "Bude nově vytvořený zdrojový prvek, který se později stane dítěem objektu hráče a přejděte na zdrojové soubory. Budeme také plánovat hák do DomContentloaded. Událost, aby se ujistil, že skript čeká na stránku načíst před kopáním do akce. 

 var videofiles = ["1.mp4", "2,MP4", "3.mp4", "4.mp4", "5.mp4"];
var hráče;
var hráčeource = dokument.Createelement ("zdroj");
Document.AddeventListener ("DomContentLoadeded", funkce () {inicializace ();}, false);

Všimněte si, že přehrávání videa v prohlížeči se spoléhá na přítomnost kodeku, který si můžete přečíst ve formátu videa, který používáte. Chcete-li zajistit, aby vaše video fungovalo křížový prohlížeč, nejbezpečnější sázka je soubory MP4 pomocí kodeku H.264.

06. Generování miniatury

Dále pojďme vytvořit funkci, která generuje miniaturu obrazu z videosouboru. Chceme to vzít v obraze videa a vrátit objektový objekt. Interně, tak, jak toho dosáhneme HTML Canvas. . 

 Funkce generatethumbnail (video) {
  var canvas = dokument.Createelement ("plátno");
  var kontejner = dokument.getElementbyid ("miniatura-kontejner");
  var width = kontejner.Clientwidth;
  var výška = kontejner.ClientHeight;
  canvas.width = (šířka / 3);
  canvas.Height = výška;
  canvas.getContext ("2d"). Swingimage (video, 0, 0, canvas.width, canvas.Height);
  var image = dokument.Createelement ("img");
  image.src = canvas.todataurl ();
  vrátit obrázek; }

07. Automaticky generovat miniatury jako videa jsou načtena

Nyní můžeme vzít funkci generatethumbnail a použít ji na každém videosouboru v našem seznamu. Udělejme to implementací inicializace () funkce. Tato funkce přidá objekt Hráčeource jako dítě video prvku, pak iterovat prostřednictvím každého souboru v seznamu, načtěte jej do dočasného objektu videa a po načtení, generování miniatury a přidat jej do kontejneru miniatury. 

 Funkce inicializace () {
  Hráč = dokument.getElementbyid ("Hráč");
  Hráč.appendChild (Hroameource);
  Hráč.controls = False;
  VideoFiles.foreach (funkce (soubor) {
  Var Thumbsource = Document.Createelement ("zdroj");
  Thumbsource.src = Soubor;
  var thumbideo = dokument.Createelement ("video");
  Thumbideo.AddeventListener ("LoadedData", funkce () {
  Var Container = Document.getElementbyid ("miniatura-kontejner")
  var image = generatethumbnail (Thumbideo);
  Kontejner.appendChild (obrázek);
  }, Nepravdivé);
  Thumbideo.appendChild (Thumbusource);
  }); }

08. Přidat odkazy do miniatur

Je však něco chybí. Naše miniatury se zobrazují v kontejneru, ale žádný z nich není klepáne. Musíme zabalit obrázky v & lt; a gt; Prvek, který potřebuje provést nějaký JavaScript při kliknutí. Upravte funkci se připojenou k loadeddata Událost vytvořit odkazy také místo img. elementy. 

 Thinkvideo.AddeventListener ("LoadedData", funkce () {
  Var Container = Document.getElementbyid ("miniatura-kontejner")
  var image = generatethumbnail (Thumbideo);
  var link = dokument.Createelement ("a");
  link.href = "JavaScript: Play (" + thumbsource.src + "") ";
  link.appendChild (obrázek);
  Kontejner.appendChild (odkaz);
  },
FALSE);

09. Přehrajte video

Nyní generují miniatury s odkazy, které jsou nastaveny tak, aby se vyvolaly Play (Thumbsource.SRC) , kde. kde. Thumbsource.src. poukazuje na název souboru příslušného videosouboru. Vše, co zůstane, je implementovat funkci přehrávání nastavit přehrávače otce (což si vzpomínáte na prvek přehrávače videa), který odkazuje na správný soubor a vypněte přehrávání. 

 Funkční přehrávání (URL)
{
  Hráčeource.src = URL;
  hráč.Controls = true;
  Hráč.load ();
  Hráč.play ();
}

Tento článek se původně objevil v čísle 266 web designér, the Creative Web Design Magazine - nabízet odborné konzultace, špičkové trendy a volné zdroje. Koupit problém 266 zde nebo Přihlásit se zde web designer zde .

Související články:

  • Jak zapnout své nabídky s animací CSS
  • 16 Úžasné příklady HTML
  • 9 nejlepších zdrojů pro učení HTML a CSS

jak - Nejoblíbenější články

Jak připravit soubor pro tisk

jak Sep 14, 2025

Jako umělecká díla Wieden + Kennedy. Londýn, I. Design pro tisk. pravidelně. Existují určit�..

Nakreslete špatný zadek Geisha

jak Sep 14, 2025

V této oblasti Geisha jsem chtěl zachytit výstřední, tmavou, městskou atmosféru, šněrovanou elegantní tradiční japons..

4 kroky k lepšímu VDM se Zbrushem

jak Sep 14, 2025

Na volné noze 3D umělec a vrchol Panelist Maya Jermy ukazuje, jak zvládnout VDM. Bude se objevit Vrchol..

Jak používat Značení ve vývoji webu

jak Sep 14, 2025

Jako webové vývojáře a obsahové tvůrci, obecně trávíme spoustu času psaní textu, který je zabalen uvnitř Htm..

Jak malovat fantasy bestie

jak Sep 14, 2025

Jakmile přijdete s nápadem na fantasy stvoření, dalším krokem je přivést to k životu malováním s uvěřitelnými barva..

Vytvoření aplikace, která shromažďuje data senzorů

jak Sep 14, 2025

Dnes, cenově dostupné platformy pro rozvoj propojených produktů se těší širokou dostupnost, a jsme viděli push pro zvý�..

Vytvořit 3D požární efekty

jak Sep 14, 2025

Oheň, povodně a zničení jsou některé z nejčastějších úkolů daných VFX umělců a v tomto 3D umění T..

Jak vytvořit animovaný webový banner ve Photoshopu

jak Sep 14, 2025

Vytváření webových bannerů není nejvíce okouzlující práce na světě, ale je to něco, co bude každý návrhář povinen udělat v určitém bodě v jejich kariéře, pravděpodobn..

Kategorie