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/what-are-the-steps-to-launch-windows-powershell">Quali sono i passaggi per avviare Windows PowerShell</a> </div> <div class="white-news__text"> Per lanciare PowerShell, in primo luogo, vai al menu di avvio e digita PowerShell nella casella di r... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/cristyn-de-santis">Cristyn De Santis</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/mysql-mariadb">MySQL MariaDB</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-find-a-specific-character-in-mysql">Come trovare un personaggio specifico in mysql?</a> </div> <div class="white-news__text"> Un carattere specifico può essere trovato in MySQL utilizzando gli operatori simili e regexp o le fu... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/artemide-ricci">Artemide Ricci</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-append-to-an-array-in-php">Come aggiungere a un array in PHP?</a> </div> <div class="white-news__text"> Gli array sono importanti per mantenere diversi tipi di dati in un unico posto. Segui questo articol... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/piererminio-de-luca">Piererminio De luca</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/pandas-to-latex">Panda al lattice</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/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/python-os-path-expanduser-method">Python OS.sentiero.Metodo espanso</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/how-to-use-xrange-in-python">Come usare XRange in Python</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/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-sqlite-viewer-web-app">Come utilizzare l'app Web SQLite Viewer</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sig-valdo-marchetti">Sig. Valdo Marchetti</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/salesforce">Salesforce</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Elenco</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/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/docker-engine-plugins">Plug -in motore Docker</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-getelementsbytagname-method-in-javascript">Come utilizzare il metodo getElementsByTagName in JavaScript</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/domiziano-conte">Domiziano Conte</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/what-is-the-purpose-of-oracle-cerner">Qual è lo scopo di Oracle Cerner?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</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/a-comparison-between-cloudtrail-and-guardduty">Un confronto tra CloudTrail e Guardduty</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dante-palumbo">Dante Palumbo</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-get-adprincipalgroupmembership--in-powershell">Come usare Get-AddrincipalGroupMembership in PowerShell</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> <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>