Come aggiungere e riprodurre video su una pagina Web utilizzando HTML?

HTML (lingua di markup ipertestuale) è una lingua di markup utilizzata per creare pagine Web e include funzionalità per l'incorporamento dei contenuti multimediali, come i video. Utilizzare HTML, l'aggiunta e la riproduzione di video su una pagina Web è un modo per visualizzare i contenuti video su un sito Web. In questo modo, i proprietari di siti Web possono migliorare l'esperienza dell'utente, coinvolgere i visitatori e comunicare informazioni in modo più dinamico e convincente.

Questo articolo dimostra come aggiungere e riprodurre video su un sito Web utilizzando:

"" Tag
"" Tag
""Tag</strong></li> <li><strong> "" Tag</strong></li> <li><strong>Bonus: incorporare video dalla fonte online come YouTube</strong></li> </ul> <p>Metodo 1: usando il tag ""</p> <p>Per visualizzare il video sulla pagina web, il metodo più consigliato è il ""Tag. Questo tag utilizza il ""Tag da bambino che ottiene l'indirizzo e il tipo di file. Dopo aver fornito la fonte del video, gli utenti possono visualizzarlo sul sito Web:</p> <br><h1> Alimentato da Linuxhint </h1><br><video controls width="50%" height="50%"><br><source src="sea.mp4" type="video/mp4"/><br></video><br> <p>Nel frammento di codice sopra, il <strong>"" Tag utilizza "Controlli", "Larghezza" e "Altezza"</strong> attributi per aggiungere controlli per il video, insieme alla sua altezza e larghezza. comunque, il <strong>""</strong> TAG ha molti più attributi per eseguire funzionalità specifiche. </p> <p>Dopo aver eseguito il codice, la pagina Web assomiglia a questa:</p> <p> <br>L'output di cui sopra mostra che il video è stato aggiunto e sta riproducendo sulla pagina web.</p> <p>Metodo 2: usando il tag ""</p> <p>Il tag oggetto può anche essere utilizzato per visualizzare il video su una pagina web. Poiché crea un contenitore in cui è possibile inserire i file multimediali e le applicazioni plug-in. Inoltre, consuma meno righe di codice ed è facile da modificare:</p> <br><h1>Alimentato da Linuxhint</h1><br><br><br><object data="sea.mp4" height="255px" width="450px" ></object><br> <p>Nel frammento di codice sopra:</p> <p>- Per inserire il video usando ""Tag, inserire il percorso video come valore per il suo"<strong>dati</strong>"Attributo.</p> <p>- Quindi, utilizza il "<strong>altezza "e" larghezza</strong>"Attributi per impostare le dimensioni/dimensioni del video sulla pagina web.</p> <p>Dopo aver eseguito il codice sopra:</p> <p>L'output conferma che il video sta riproducendo nella finestra.</p> <p>Metodo 3: usando "<iframe>"Tag</p> <p>IL "<strong><iframe></strong>"Il tag può essere utilizzato per aggiungere e riprodurre video su una pagina Web a causa del suo forte legame con i documenti principali. Aiuta a incorporare contenuti di terze parti nella pagina Web, questo tag viene utilizzato principalmente in contrasto con i tag Embed e Object. Il codice per aggiungere video dalla directory locale nel file HTML è:</p> <br><h1>Alimentato da Linuxhint</h1><br><br><br><iframe src="sea.mp4" height="255px" width="450" >

Nel frammento di codice sopra:

Innanzitutto, il Parent Div viene disegnato per visualizzare gli elementi contenenti al centro della pagina web.

Poi il "</strong>Tag "<strong>src</strong>"L'attributo viene utilizzato per la memorizzazione del percorso video.</li> <li>Successivamente, per impostare le dimensioni del video "<strong>altezza</strong>" E "<strong>larghezza</strong>"Attributi del"<strong><iframe></strong>"Vengono utilizzati tag.</li> </ul> <p>Dopo l'esecuzione del codice sopra, la pagina Web assomiglia a questa:</p> <p>L'output di cui sopra visualizza che il video è stato aggiunto e riprodotto sul sito Web.</p> <p>Metodo 4: usando il tag ""</p> <p>IL ""Il tag può anche essere utilizzato per l'aggiunta e la riproduzione di video sulla pagina web. Questo tag può essere utilizzato anche per la visualizzazione di immagini e file HTML:</p> <br><h1>Alimentato da Linuxhint</h1><br><br><br><embed type="video/mp4" src="sea.mp4" width="400" height="300"><br> <p>In questo codice,</p> <p>- Un video è incorporato in una pagina HTML con il file di origine "<strong>mare.MP4</strong>"E una larghezza e un'altezza di 400 e 300 pixel, rispettivamente.</p> <p>- Il video viene visualizzato all'interno di un contenitore centrato con l'intestazione "<strong>Alimentato da Linuxhint</strong>" Oltre a questo.</p> <p>Dopo aver eseguito lo snippet di codice sopra, la pagina Web sembra così:</p> <p>La GIF sopra mostra che il video viene aggiunto e riprodotto sulla pagina web usando ""Tag.</p> <p>Bonus: incorporare video dalla fonte online come YouTube</p> <p>Per incorporare il video da un sito di terze parti come YouTube, il "<strong><iframe>" E "</strong>"I tag possono essere molto utili. Questi tag consentono agli sviluppatori di incorporare video direttamente sul sito Web senza la necessità di scaricare quei video. Per eseguire questo, è richiesto il collegamento video incorporato a cui è possibile accedere seguendo la breve guida di seguito:</p> <ul> <li>Innanzitutto, seleziona il video di YouTube che l'utente desidera visualizzare sulla loro pagina web. Quindi apri l'elenco delle opzioni per quel video. Dopodiché, trova e seleziona il "<strong>Condividere</strong>" opzione:</li> </ul> <ul> <li>Successivamente, la finestra corta viene aperta e seleziona "<strong>Incorporare</strong>"Opzione da qui:</li> </ul> <ul> <li>Successivamente, viene generato il collegamento video incorporato e copia l'URL:</li> </ul> <p>Dopo aver copiato il “<strong>Incorporare</strong>"Codice video, inseriscilo come valore di"<strong>src</strong>"Attributo nel"<strong><iframe></strong>"Tag:</p> <br><h1>Alimentato da Linuxhint</h1><br><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/NSAOrGb9orM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen><br>

Ora, per visualizzare lo stesso video di YouTube usando ""Tag. Inserire il "src"Valore dell'attributo in"dati"Attributo del""Tag:

Dopo aver eseguito i codici sopra, la pagina Web assomiglia a questa:

Nella gif sopra, il primo video di YouTube è stato visualizzato sulla pagina web.

Conclusione

Per aggiungere e riprodurre video sulla pagina web, gli utenti possono utilizzare il """,", E "</strong>"Tag HTML. IL "Il tag è avvolto dal ""Tag per visualizzare il file video nella pagina web. Per il "<strong><iframe></strong>"Tag, posizionare il percorso dell'immagine nel suo"<strong>src</strong>"Attributo. E per il ""Tag posizionare il percorso dell'immagine come valore per il"<strong>dati</strong>"Attributo. Questo articolo ha dimostrato come aggiungere e riprodurre video su una pagina web utilizzando HTML.</p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://it.cyberaxe.org/article/how-to-create-html-bullet-points">« Come creare punti elenco HTML?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">Come può essere utilizzato Flexbox per creare una barra di navigazione? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-does-the-get-process-command-work-in-powershell">Come funziona il comando get-process in PowerShell</a> </div> <div class="white-news__text"> Il cmdlet get-process in PowerShell ottiene il processo di esecuzione su computer remoti e locali. P... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/piererminio-de-luca">Piererminio De luca</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/git">Idiota</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-rewrite-most-recent-commit-history-in-git">Come riscrivere la storia del commit più recente in git?</a> </div> <div class="white-news__text"> Per riscrivere la cronologia del commit, il comando git commit può essere utilizzato con l'opzione -... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/java">Giava</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/java-stream-examples">Esempi di streaming Java</a> </div> <div class="white-news__text"> Guida sui diversi usi del flusso Java nella programmazione Java come generare l'array e la raccolta ... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/python-write-string-to-file">Python scrivi stringa su file</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/cristyn-de-santis">Cristyn De Santis</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-do-i-convert-an-exception-to-a-string-in-python">Come converti un'eccezione in una stringa in Python</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/python-count-characters-in-string">Python Count personaggi nella stringa</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/pandas-readcsv-multiprocessing">PANDAS Read_CSV Multiprocessing</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-arrayreverse-function-in-php">Come utilizzare la funzione Array_Reverse in PHP</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-evita-damico">Dr. Evita Damico</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-css-flex-grow-property">Come utilizzare la proprietà CSS Flex-Grow?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sarita-negri">Sarita Negri</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/java-database-connectivity-with-oracle">Connettività del database Java con Oracle</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-folco-leone">Dr. Folco Leone</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-an-instance-and-how-to-use-it-in-ec2">Cos'è un'istanza e come usarlo in EC2?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/git">Idiota</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-does-git-work">Come funziona Git?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/felicia-giuliani">Felicia Giuliani</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-sqlite-used-for-is-it-better-than-sql">A cosa serve sqlite? È meglio di SQL?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sito sul sistema operativo Linux. Qui troverai molti articoli interessanti e guide utili</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/python">Pitone</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/windows-os">OS Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://it.cyberaxe.org/all-categories"><b>Tutte le categorie</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>