Come inserire un film o un video in un documento HTML

0
175

Come inserire un film o un video in un documento HTML

HTML

Puoi incorporare un filmato in un documento HTML utilizzando gli esempi seguenti. Per compatibilità, ti consigliamo di utilizzare il formato video MP4, supportato da tutti i principali browser e sistemi operativi.

Consiglio

L’hosting di film sul tuo server può essere costoso a causa dei costi della larghezza di banda. Un’alternativa è ospitare il video su YouTube e incorporare il link del video di YouTube nella tua pagina web.

Nota

Non tutti i suggerimenti seguenti funzionano per tutti i browser. Assicurati che la soluzione che decidi di utilizzare funzioni con i browser che desideri supportare.

Collegamento a file di film

Gli esempi seguenti forniscono diversi metodi per rendere il file video visualizzabile dalla finestra del browser. Ti consigliamo inoltre di creare un collegamento per il download diretto al file, che consenta ai visitatori di scaricare il file se il film non viene riprodotto nel browser. Di seguito sono riportati due esempi di collegamenti diretti per i due file video in questa pagina.

Robot con unità floppy

codice HTML

<a href="https://www.computerhope.com/issues/floppy2.avi">Floppy drive robot</a>

Commerciale IBM Linux

codice HTML

<a href="https://www.computerhope.com/issues/ibm-linux.mov">IBM Linux commercial</a>

Incorpora un video di YouTube

L’hosting di video su YouTube è fantastico perché consente di risparmiare sui costi della larghezza di banda, può supportare molti spettatori e presenta i tuoi video ai visitatori della maggior parte dei siti Internet. Di seguito è riportato un esempio di video ospitato su YouTube e incorporato in questo sito.

codice HTML

Il codice HTML per tutti i video di YouTube si trova tramite il link di condivisione che si trova su ogni video di YouTube. Dopo aver fatto clic sul collegamento Condividi, fai clic sul collegamento Incorpora. Di seguito è riportato un esempio del codice utilizzato per visualizzare il video di YouTube sopra.

<object height="350" width="425">
<param name="movie" value="https://www.youtube.com/v/R3ymHMgFAps">
<param name="wmode" value="transparent">
<embed height="350" src="https://www.youtube.com/v/R3ymHMgFAps?rel=0" type="application/x-shockwave-flash" width="425" wmode="transparent"> </object>

Tag video

Il tag

codice HTML

<video class="tab" controls>Your browser does not support the &lt;video&gt; tag.
<source src="/jargon/m/computer-hope.mp4"/>
</video>

Tag di incorporamento di base

Di seguito è riportato il codice per il metodo di base per incorporare un file in una pagina web.

Esempio di codice HTML

<embed src="https://www.computerhope.com/issues/floppy2.avi"></embed>

In questo esempio, stai usando l’elemento embed per puntare alla sorgente del file del filmato che vuoi riprodurre. Questo esempio è molto semplice e non visualizzerà alcun avviso. Non indirizzerà l’utente a una posizione per scaricare un plug-in se il file video non è supportato.

Aggiungi il file del filmato usando il tag img

Se non desideri utilizzare il tag, puoi anche includere un file filmato utilizzando il tag , come mostrato nell’esempio seguente.

Esempio di codice HTML

<img dynsrc="https://www.computerhope.com/issues/floppy2.avi" start="fileopen">

Incorpora tag per riprodurre filmati QuickTime (.MOV)

I file di filmati Apple QuickTime sono un altro tipo di film popolare su Internet. Di seguito è riportato un esempio di base di come includere questi file nella tua pagina web.

Nota

QuickTime non è più supportato su Microsoft Windows e tutti i nuovi browser non supportano più questo metodo di incorporamento di filmati QuickTime.

Esempio di codice HTML

<embed src="https://www.computerhope.com/issues/ibm-linux.mov" Pluginspage="https://support.apple.com/quicktime" width="320" height="250" CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="IBM Video"></embed>

Nell’esempio di incorporamento, la prima parte del codice punta alla src (sorgente) del file del filmato, che è il file del filmato stesso. Successivamente, la pagina dei plug-in è la posizione del plug-in se il visitatore non lo ha installato. La larghezza e l’altezza sono le dimensioni effettive del file video. Il valore Controller può essere impostato su true o false per alternare la visualizzazione dei controlli inferiori.

Consiglio

Potresti voler aumentare l’altezza del file video se non riesci a vedere il controller.

Loop è un’impostazione per quando si desidera che il file ricominci automaticamente al termine. Infine, la riproduzione automatica indica al browser di avviare o meno la riproduzione del file video al termine del caricamento della pagina.

Digita l’attributo per il tag di incorporamento per specificare il plug-in

Nel tag di incorporamento, includi l’attributo type per specificare il tipo MIME per il file video. In questo modo è possibile specificare il plug-in necessario per riprodurre il video in un browser.

Esempio di codice HTML

<embed src="https://www.computerhope.com/issues/floppy2.avi" type="video/x-msvideo"></embed>

Nell’esempio sopra, l’attributo type è impostato su video/x-msvideo, che è il tipo MIME per i file video AVI.

Per determinare il valore da assegnare all’attributo type per altri tipi di file video, controlla l’elenco dei tipi MIME per i file video nella pagina IANA Media Types.