Come lavorare con il video HTML

Sep 17, 2025
Come si fa

Sposta su Youtube ... con il & lt; Video & GT; elemento e un po ' Javascript. , puoi iniziare a creare il tuo sito video. L'elemento video è abbastanza semplice da usare, ma il vero potere arriva quando la combina con JavaScript, che ti dà un alto livello di controllo sul comportamento del giocatore.

In questo tutorial, copriamo la configurazione di base di un video, selezionando i file per riprodurre e generare miniature.

01. Creare una pagina di base

Iniziamo con un contorno della pagina HTML. Avremo bisogno di una semplice struttura div, alcuni CSS per lo styling e, in modo critico, un file di script. Noterai che il tag video è vuoto in questo momento, quindi non farà nulla quando caricherai la pagina. Tuttavia, lo diamo un id. Quindi possiamo controllarlo con JavaScript. 

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta chater = 'utf-8' / & gt;
  & lt; Titolo & GT; My HTML Video Player & Lt; / Titolo & GT;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "player.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; corpo e GT;
  & lt; div id = "titolo" e gt;
  & lt; h1 & gt; Benvenuti nella mia libreria video! & lt; / h1 & gt;
Scorri tra i video qui sotto e fai clic su quello che vuoi giocare.
  & lt; / div & gt;
  & lt; div id = "thumbnail-contenitore" e GT;
  & lt; / div & gt;
  & lt; div id = "player-container" & gt;
  & lt; video id = "player" & gt;
  & lt; / video e GT;
  & lt; div id = "controlli" e gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / corpo e GT;
  & lt; / html & gt;

02. Stile la pagina

Successivamente, inizieremo ad aggiungere lo styling alla pagina. Prima di provare a fare qualcosa troppo intelligente, iniziamo aggiungendo lo styling di base a un paio dei nostri elementi div così le cose sembrano un po 'più rispettabili. 

 Body {
  Sfondo-Color: #CCCCCC;
  Fammon-family: sans-serif;
}
# giocatore-container {
  Margin-Left: Auto;
  Margine-destra: Auto;
  Larghezza: 640PX;
  Altezza: 480px;
  sfondo-colore: # 538c99;
  Border-Radius: 20px;
}
#title {
  Margin-Left: Auto;
  Margine-destra: Auto;
  Larghezza: 640PX;
  Text-Align: Center;
  imbottitura: 30px;
  Imbottitura-inferiore: 50 px;
  sfondo-colore: # 538c99;
  Colore: # 333333;
  Border-Radius: 20px; }

03. Aggiungi più styling

Le cose diventano un po 'più interessanti quando arriviamo a Style the Thumbnail-Container Div. Stiamo per riempirlo con img. Elementi, che saranno le miniature generate dai nostri video. Pertanto, vogliamo che mostri una barra di scorrimento orizzontale se abbiamo più anteprime di quanto possa mostrare contemporaneamente. Possiamo farlo usando il overflow-x. proprietà. 

 # miniatura-contenitore {
  Sfondo-Color: #CCCCCC;
  Margine-Top: 30px;
  Margin-Left: Auto;
  Margine-destra: Auto;
  Larghezza: 640PX;
  Altezza: 120 px;
  Overflow-x: rotolo;
  Overflow-y: nascosto;
  Spazio bianco: NowRap;
  Border-Radius: 20px; }

04. Dimensioni il lettore video in modo appropriato

C'è un altro pezzo di stile che dobbiamo fare. Poiché è, quando iniziamo a giocare a video, mostreranno a qualunque sia la loro risoluzione nativa. Questo non ha intenzione di guardare bene sulla pagina. Diamo stile l'elemento video per determinare quanto dovrebbe essere grande. Se mettiamo la sua larghezza e l'altezza al 100%, riempirà il suo div contenente. 

 Video {
  Larghezza: 100%;
  Altezza: 100%; }

05. Impostare lo script

È tempo di scendere al JavaScript. Prepariamo un elenco di file video in un array con cui funzioneremo (codice hard-code per ora, ma è possibile provare a configurarlo per recuperare tramite JSON da un servizio http).

Definiremo anche un paio di variabili che useremo in seguito: ' giocatore 'Sarà l'elemento video; « Playourource. 'Sarà un elemento di origine appena creato che diventerà un figlio dell'oggetto del giocatore in seguito, e punta a file sorgente. Pianificheremo anche di agganciare in a Domcontentloaded. Evento per assicurarsi che lo script attende che la pagina carichi prima di calciare in azione. 

 VIDEOFILS VAR = ["1.MP4", "2.MP4", "3.MP4", "4.MP4", "5.MP4"];
var player;
Var Playeyource = Document.CreateSelement ("Source");
document.addeventListener ("Domcontentloaded", funzione () {Initialise ();}, false);

Si noti che la riproduzione video nel browser si affida alla presenza di un codec in grado di leggere il formato video che stai utilizzando. Per garantire il tuo video Browser del tuo video, la scommessa più sicura è i file MP4 utilizzando il codec H.264.

06. Genera una miniatura

Avanti Creiamo una funzione che genererà una miniatura dell'immagine da un file video. Vogliamo che questo prenda un oggetto video e restituire un oggetto immagine. Internamente, il modo in cui raggiungere questo utilizzeremo questo è l'utilizzo Tela html. . 

 Funzione Generatethombnail (video) {
  var canvas = document.createelement ("tela");
  contenitore VAR = document.getElementbyID ("miniatura-contenitore");
  var width = contenitore.clientwidth;
  VAR ALTEZZA = container.clientHeight;
  canvas.width = (larghezza / 3);
  canvas.Height = altezza;
  canvas.getContext ("2D"). Drawnimage (video, 0, 0, canvas.width, canvas.Height);
  var image = document.createelement ("img");
  image.src = canvas.todataurl ();
  immagine di ritorno; }

07. Genera automaticamente le miniature come vengono caricati i video

Ora possiamo prendere la funzione generatethombnail e usarlo su ciascuno dei file video nella nostra lista. Facciamolo implementando il inizializzare() funzione. Questa funzione aggiungerà l'oggetto PloyOrceource come figlio dell'elemento video, quindi itera attraverso ogni file nell'elenco, caricarlo in un oggetto video temporaneo, e una volta caricato, genera una miniatura e aggiungerla al contenitore anteprime. 

 Funzione inizializzazione () {
  giocatore = document.getelementbyID ("Player");
  giocatore.appendchild (attoriOrce);
  giocatore.controls = falso;
  VideoFiles.Fieach (funzione (file) {
  var thumbsource = document.createlement ("sorgente");
  thumbsource.src = file;
  var thumbvideo = document.createlement ("video");
  thumbvideo.addeventlantener ("loadeddata", funzione () {
  VAR Container = Document.getElementByID ("Thumbnail-Container")
  Immagine VAR = Generatethumbnail (ThumbVideo);
  contenitore.appendchild (immagine);
  }, falso);
  thumbvideo.appendchild (thumbsource);
  });); }

08. Aggiungi collegamenti alle miniature

C'è qualcosa che manca, però. Le nostre miniature si presentano nel contenitore, ma nessuno di loro è cliccabile. Dobbiamo avvolgere le immagini in un & lt; A & GT; Elemento, che deve eseguire un po 'di javascript quando cliccato. Regola la funzione agganciata al caricadeddata. evento per creare anche i collegamenti, invece di solo img. elementi. 

 thumblvideo.addeventListener ("Loadeddata", funzione () {
  VAR Container = Document.getElementByID ("Thumbnail-Container")
  Immagine VAR = Generatethumbnail (ThumbVideo);
  var link = document.createelement ("A");
  link.href = "JavaScript: gioca (\" "+ thumbsource.src +" \ ")";
  link.appendchild (immagine);
  contenitore.appendchild (link);
  },
falso);

09. Gioca a un video

Ora stiamo generando miniature con collegamenti cliccabili, che sono impostati per invocare Gioca (Thumbsource.Src) , dove Thumbsource.src. Punti al nome del file del file video pertinente. Tutto ciò che rimane è implementare la funzione di gioco per impostare il lettoreOurce (che ricorderai che abbiamo collegato all'elemento del lettore video) per puntare al file corretto e iniziare la riproduzione. 

 PLAY PLAY (URL)
{
  giocatoriource.src = URL;
  giocatore.controls = true;
  giocatore.load ();
  giocatore.play ();
}

Questo articolo è originariamente apparso in emissione 266 di Web Designer, la rivista creativa Web Design - offre esercitazioni di esperti, tendenze all'avanguardia e risorse gratuite. Acquista il problema 266 qui o Iscriviti al web designer qui .

Articoli Correlati:

  • Come accendere i tuoi menu con animazione CSS
  • 16 Esempi HTML incredibili
  • 9 delle migliori risorse per l'apprendimento HTML e CSS

Come si fa - Articoli più popolari

Come disegnare un gatto

Come si fa Sep 17, 2025

Vuoi sapere come disegnare un gatto? Sei venuto nel posto giusto. Disegno gli animali possono essere complicati ma è anche grati..

Procreare tutorial: Come dipingere come i vecchi maestri

Come si fa Sep 17, 2025

C'è sempre qualcosa di nuovo da imparare dai vecchi maestri, sia che sia composizione, illuminazione o persino una tecnica narra..

Controllo della versione principale per team remoti

Come si fa Sep 17, 2025

Lavorare da remoto è diventato molto più comune nello sviluppo web negli ultimi anni. Prima del controllo della versione, lavor..

10 Suggerimenti per la modellazione della superficie dura

Come si fa Sep 17, 2025

Questa immagine del grande sapore orientale del Brunel dal 1858 è subito permanente in un nuovo museo di £ 7 milioni a Bristol,..

Comprensione della proprietà del display CSS

Come si fa Sep 17, 2025

È mezzanotte, e quella div. Sul tuo sito sembra ancora un petto giocattolo di un bambino. Tutti gli elementi sono..

Crea piastrelle ornate in Prostanze Designer

Come si fa Sep 17, 2025

Pagina 1 di 2: Piastrelle di progettazione e texture 3D Piastrelle di pro..

Modello Darth Vader in Zbrush

Come si fa Sep 17, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

5 modi per gestire il flusso di cassa in modo efficace

Come si fa Sep 17, 2025

Il controllo del flusso di cassa è fondamentale per il successo freelance, e ci sono alcune regole difficili e veloci per assicu..

Categorie