Jak pracować z wideo HTML

Sep 12, 2025
Jak

Przejdź nad YouTube ... z Video & GT; element i trochę Javascript. , możesz zacząć tworzyć własną stronę wideo. Element wideo jest dość prosty, ale prawdziwa moc przychodzi, gdy łączysz go z JavaScript, co daje wysoki poziom kontroli nad zachowaniem gracza.

W tym samouczku przykrywamy podstawową konfigurację wideo, wybierając pliki do odtwarzania i generowania miniatur.

01. Utwórz stronę podstawową

Zacznijmy od konspektu strony HTML. Będziemy potrzebować prostej struktury div, niektóre CSS do stylizacji i, najbardziej krytycznie pliku skryptowego. Zauważysz, że tag wideo jest teraz pusty, więc nic nie zrobisz po załadowaniu strony. Jednak dajemy to ID Możemy więc kontrolować go z JavaScript. 

 DocType HTML & GT;
& lt; html & gt;
  & lt; Head & GT;
  & LT; Meta CharSet = 'UTF-8' / & GT;
  & lt; tytuł i GT; mój HTML Video Player & LT; / Title & GT;
  & LT; link rel = 'style arkuszu' href = 'custom.css' / & gt;
  & lt; skrypt SRC = "Player.js" & GT; & LT; / Script & GT;
  & LT; / Head & GT;
  & lt; body & gt;
  & lt; div ID = "tytuł" & gt;
  & LT; H1 & GT; Witamy w mojej bibliotece wideo! & LT; / H1 & GT;
Przewiń poniższe filmy i kliknij ten, który chcesz zagrać.
  & lt; / div & gt;
  & lt; div ID = "Miniatura pojemnik" & GT;
  & lt; / div & gt;
  & lt; div ID = "Pojemnik gracza" & GT;
  & LT; Video ID = "Gracz" & GT;
  & lt; / video & gt;
  & lt; div ID = "Controls" & GT;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / body & gt;
  & lt; / html & gt;

02. Styl Strona

Następnie zaczniemy dodawać stylizacji do strony. Zanim spróbujemy zrobić coś zbyt sprytnego, zacznijmy od dodawania podstawowej stylizacji do kilku naszych elementów div, więc sprawy wyglądają trochę bardziej szacunku. 

 Ciało {
  Kolor tła: #CCCCCC;
  Czcionka: Sans-Serif;
}
# kontener player {
  Marginet-left: Auto;
  margines prawy: auto;
  Szerokość: 640px;
  Wysokość: 480px;
  kolor-kolor: # 538C99;
  RADIUS RADIUS: 20PX;
}
#title {
  Marginet-left: Auto;
  margines prawy: auto;
  Szerokość: 640px;
  Tekst-Wyrównuj: Centrum;
  Padding-Top: 30px;
  Padding-dno: 50px;
  kolor-kolor: # 538C99;
  kolor: # 333333;
  RADIUS RADIUS: 20PX; }

03. Dodaj więcej stylizacji

Rzeczy stają się trochę bardziej interesujące, kiedy przychodzimy do stylu miniatur pojemnika Div. Wypełnimy to img. Elementy, które będą generowane miniaturami z naszych filmów. Dlatego chcemy, aby wyświetlić poziomy pasek przewijania, jeśli mamy więcej miniatur niż może pokazać jednocześnie. Możemy to zrobić za pomocą Przepełniać-X. własność. 

 # miniaturkowy pojemnik {
  Kolor tła: #CCCCCC;
  Margin-Top: 30px;
  Marginet-left: Auto;
  margines prawy: auto;
  Szerokość: 640px;
  Wysokość: 120px;
  Przepełnienie-X: Przewiń;
  przelew-y: ukryty;
  Biała przestrzeń: Nowrap;
  RADIUS RADIUS: 20PX; }

04. Rozmiar odpowiednio odtwarzacz wideo

Jest jeszcze jeden kawałek stylizacji, musimy zrobić. Jak to jest, gdy zaczynamy odtwarzać filmy, będą wyświetlane w niezależnie od ich natywnej rozdzielczości. To nie będzie dobrze wyglądać na stronie. Stylmy element wideo, aby określić, jak duże powinno być. Jeśli ustawimy jego szerokość i wysokość do 100%, po prostu wypełni ją jego zawierający div. 

 Video {
  Szerokość: 100%;
  Wysokość: 100%; }

05. Ustaw skrypt

Nadszedł czas, aby zejść do JavaScript. Przygotujmy listę plików wideo w tablicy, aby pracować z (na razie pracujemy na razie, ale możesz spróbować skonfigurować go do pobierania przez JSON z usługi HTTP).

Zdefiniujemy również kilka zmiennych, których użyjemy później: " gracz "Będzie elementem wideo; " gracze "Będzie nowo utworzony element źródłowy, który będzie dzieckiem obiektu gracza później i wskaż na pliki źródłowe. Zaplanujemy również haczy DOMCONTENTOLEDED. Wydarzenie, aby upewnić się, że skrypt czeka na załadowanie strony przed rozpoczęciem działania. 

 Var VideoFiles = ["1.mp4", "2.mp4", "3.mp4", "4.mp4", "5.mp4"];
var gracz;
var graczaurce = dokument.Createvelement ("Źródło");
Document.Addeventlistener ("DomcontentLoaded", Funkcja () {Initiseise ();}, False);
  

   Należy pamiętać, że odtwarzanie wideo w przeglądarce polega na obecności kodeka, który może przeczytać format wideo, którego używasz. Aby upewnić się, że Twoja przeglądarka Works Cross-Browser, najbezpieczniejszy zakład to pliki MP4 za pomocą kodeku H.264.
  

  

   06. Wygeneruj miniaturę
  

  

   Następny Utwórzmy funkcję, która wygeneruje miniaturę obrazu z pliku wideo. Chcemy, aby wziąć obiekt wideo i zwrócimy obiekt obrazu. Wewnętrznie sposób, w jaki to osiągniemy, używa
   
    HTML Canvas.
   .
  

  
 Funkcja generatetheBminnail (wideo) {
  var canvas = dokument.createelement ("płótno");
  var Container = Document.getElementByid ("Miniatura kontener");
  var szerokość = kontener.Clientwidth;
  var wysokość = kontener.Clientheight;
  płótno.width = (szerokość / 3);
  płótno.Height = wysokość;
  Canvas.getContext ("2d"). Rattimage (wideo, 0, 0, płótno.width, płótno.Height);
  var obraz = dokument.Createelement ("img");
  Image.Src = Canvas.Todataurl ();
  zwracać obraz; } 

  

   07. Automatycznie generuj miniatury jako ładowane są filmy
  

  

   Teraz możemy wziąć funkcję generatethumbnail i użyć go na każdym z plików wideo na naszej liście. Zróbmy to, wdrażając
   
    Inicjalizacja ()
   
   funkcjonować. Funkcja ta dodaje obiekt gracza jako dziecko elementu wideo, a następnie iteruje za każdym pliku na liście, załaduj ją do tymczasowego obiektu wideo, a następnie załadowany, wygeneruj miniaturę i dodaj go do kontenera miniatur.
  

  
 Initalizacja funkcji () {
  gracz = dokument.getElementByid ("gracz");
  gracz.appendChild (gracza?
  gracz.Controls = false;
  videoFiles.Foreach (funkcja (plik) {
  var thumbsource = dokument.Createelement ("Źródło");
  thumbsource.src = plik;
  var thumbvideo = dokument.Createelement ("wideo");
  thumbvideo.addeventlistener ("Loadeddata", funkcja () {
  Var Container = Document.getElementByid ("Miniatura kontener")
  var obraz = generatethymnail (thumbvideo);
  kontener.appendChild (obraz);
  }, fałszywy);
  thumbvvideo.appendChild (Thumbsource);
  }); } 

  

   08. Dodaj linki do miniatur
  

  

   Choć jest coś. Nasze miniatury pojawiają się w pojemniku, ale żaden z nich nie jest klikalny. Musimy owinąć obrazy w
   
    & lt; a & gt;
   
   element, który musi wykonać jakiś JavaScript po kliknięciu. Dostosujmy funkcję podłączony do
   
    Loadeddata.
   
   wydarzenie, aby utworzyć również linki, zamiast tylko
   
    img.
   
   elementy.
  

  
 Thumbvvideo.addeventlistener ("Loadeddata", funkcja () {
  Var Container = Document.getElementByid ("Miniatura kontener")
  var obraz = generatethymnail (thumbvideo);
  var link = dokument.Createelement ("a");
  link.href = "javascript: Play (" "+ Thumbsource.src +" ")";
  link.appendChild (obraz);
  kontener.appendChild (link);
  },
false); 

  

   09. Odtwórz wideo
  

  

   Teraz generujemy miniatury z klikalnymi linkami, które są ustawione do wywołania
   
    Odtwórz (Thumbsource.src)
   
   , gdzie
   
    thumbsource.src.
   
   wskazuje na nazwę pliku odpowiedniego pliku wideo. Wszystko, co pozostaje, jest wdrożenie funkcji PLAY, aby ustawić graczaurce (które pamiętasz, że po raz wspominamy do elementu odtwarzacza wideo), aby wskazać poprawny plik i rozpocząć odtwarzanie.
  

  
 Funkcja Play (URL)
{
  graczeurce.src = adres URL;
  gracz.Controls = true;
  Player.load ();
  gracz.Play ();
} 

  

   
    Ten artykuł pierwotnie pojawił się w wydaniu 266 projektantów internetowych, kreatywnego magazynu projektowania stron internetowych - oferujący eksperckie samouczki, najnowocześniejsze trendy i bezpłatne zasoby.
   
   
    
     Kup problem 266 tutaj
    
   
   
    lub
   
   
    
     Subskrybuj tutaj projektant stron internetowych
    
   
   
    .
   
  

  

   
    Powiązane artykuły:
   
  

  
    
   
  • 
    
     Jak włączyć menu z animacją CSS
    
   
    • 
   
  • 
    
     16 Niesamowite przykłady HTML
    
   
    • 
   
  • 
    
     9 najlepszych zasobów do nauki HTML i CSS
    
   
    •

Jak - Najpopularniejsze artykuły

Utwórz przytulne wnętrze za pomocą sztuki linii

Jak Sep 12, 2025

Dla tego warsztatu zamierzam stworzyć wewnętrzne tło z linii sztuki linii i teksturowanej farby. Chcę przyznać sukces, robi�..

Utwórz specjalne wykończenia druku w InDesign

Jak Sep 12, 2025

Strona 1 z 4: Blokowanie folii. Blokowanie folii. ..

Jak malować jak XIX-wieczny master

Jak Sep 12, 2025

XIX wiek był wspaniałym czasem na sztukę. Artyści odbyli się w wysokim szacunku, a opinia publiczna została wykształceni o..

Utwórz prosty wykres kolorowy

Jak Sep 12, 2025

Spożywać się Teoria kolorów. może wydawać się trochę za bardzo jak nauka matematyki lub nauki. Możesz czuć, że chcesz być kreatywny i wyrażać siebie, nie ćwiczy�..

Jak tworzyć znaki z kreskówek w kinie 4D

Jak Sep 12, 2025

Wraz z pojawieniem się gier mobilnych i indie Gry wideo , był duży napływ ilustratorów i animatorów ..

Model Darth Vader w Zbrush

Jak Sep 12, 2025

Strona 1 z 2: Strona 1 Strona 1 Strona 2..

Utwórz mieszane farby z InDesign

Jak Sep 12, 2025

Strona 1 z 2: Utwórz próbkę tuszu mieszanego Utwórz próbkę tuszu mi..

Jak utworzyć Snapchat Geofilter w Photoshopie

Jak Sep 12, 2025

Klienci stale poszukuje nowych sposobów angażowania się z publiczności. Snapchat Geofilters - Specjalne nakładki komunikacyjne - są świetnym sposobem, aby uzyskać markę przed ludźmi..

Kategorie