Cómo agregar y reproducir videos en una página web usando HTML?

Hernán Delao

HTML (lenguaje de marcado de hipertexto) es un lenguaje de marcado utilizado para crear páginas web, e incluye características para integrar contenido multimedia, como videos. Uso de HTML, agregar y reproducir videos en una página web es una forma de mostrar contenido de video en un sitio web. De esta manera, los propietarios de sitios web pueden mejorar la experiencia del usuario, involucrar a los visitantes y comunicar información de manera más dinámica y convincente.

Este artículo demuestra cómo agregar y reproducir videos en un sitio web usando:

"" Etiqueta
"" Etiqueta
"" Etiqueta</strong></li> <li><strong> "" Etiqueta</strong></li> <li><strong>Bonificación: incrustación de videos de fuente en línea como YouTube</strong></li> </ul> <p>Método 1: Uso de la etiqueta ""</p> <p>Para mostrar el video en la página web, el método más recomendado es el "" etiqueta. Esta etiqueta usa el ""Etiqueta como niño que obtiene la dirección y el tipo de archivo. Después de proporcionar la fuente del video, los usuarios pueden mostrarlo en el sitio web:</p> <br><h1> Impulsado por Linuxhint </h1><br><video controls width="50%" height="50%"><br><source src="sea.mp4" type="video/mp4"/><br></video><br> <p>En el fragmento de código anterior, el <strong>"" La etiqueta usa "controles", "ancho" y "altura"</strong> atributos para agregar controles para el video, junto con su altura y ancho. sin embargo, el <strong>""</strong> La etiqueta tiene muchos más atributos para realizar una funcionalidad específica. </p> <p>Después de ejecutar el código, la página web se ve así:</p> <p> <br>La salida anterior muestra que el video se ha agregado y se está reproduciendo en la página web.</p> <p>Método 2: Uso de la etiqueta ""</p> <p>La etiqueta del objeto también se puede utilizar para mostrar el video en una página web. Ya que crea un contenedor en el que se pueden insertar los archivos multimedia y las aplicaciones enchufables. Además, consume menos líneas de código y es fácil de modificar:</p> <br><h1>Impulsado por Linuxhint</h1><br><br><br><object data="sea.mp4" height="255px" width="450px" ></object><br> <p>En el fragmento de código anterior:</p> <p>- Para insertar el video usando el ""Etiqueta, inserte la ruta de video como un valor para su"<strong>datos</strong>" atributo.</p> <p>- Luego, utiliza el "<strong>alto y ancho</strong>"Atributos para establecer las dimensiones/tamaño del video en la página web.</p> <p>Después de ejecutar el código anterior:</p> <p>La salida confirma que el video se está reproduciendo en la ventana.</p> <p>Método 3: Uso de "<iframe>" Etiqueta</p> <p>El "<strong><iframe></strong>"La etiqueta se puede utilizar para agregar y reproducir videos en una página web debido a su fuerte vínculo con los documentos principales. Ayuda a incrustar contenido de terceros en la página web, esta etiqueta se usa principalmente en contraste con las etiquetas de incrustación y objeto. El código para agregar video del directorio local en el archivo HTML es:</p> <br><h1>Impulsado por Linuxhint</h1><br><br><br><iframe src="sea.mp4" height="255px" width="450" >

En el fragmento de código anterior:

Primero, el Div Padre se está diseñando para mostrar los elementos que contienen en el centro de la página web.

Entonces el "</strong>" etiqueta "<strong>SRC</strong>El atributo se utiliza para almacenar la ruta de video.</li> <li>Después de eso, para establecer el tamaño del video "<strong>altura</strong>" y "<strong>ancho</strong>"Atributos del"<strong><iframe></strong>Se usan la etiqueta.</li> </ul> <p>Después de la ejecución del código anterior, la página web se ve así:</p> <p>La salida anterior muestra que el video se ha agregado y reproducido en el sitio web.</p> <p>Método 4: Uso de la etiqueta ""</p> <p>El ""La etiqueta también se puede utilizar para agregar y reproducir videos en la página web. Esta etiqueta también se puede usar para mostrar imágenes y archivos HTML:</p> <br><h1>Impulsado por Linuxhint</h1><br><br><br><embed type="video/mp4" src="sea.mp4" width="400" height="300"><br> <p>En este código,</p> <p>- Un video está integrado en una página HTML con el archivo fuente "<strong>mar.mp4</strong>"Y un ancho y una altura de 400 y 300 píxeles, respectivamente.</p> <p>- El video se muestra dentro de un contenedor centrado con el encabezado "<strong>Impulsado por Linuxhint</strong>" sobre eso.</p> <p>Después de ejecutar el fragmento de código anterior, la página web se ve así:</p> <p>El GIF anterior ilustra que el video se agrega y se reproduce en la página web utilizando el "" etiqueta.</p> <p>Bonificación: incrustación de videos de fuente en línea como YouTube</p> <p>Para incrustar el video de un sitio de terceros como YouTube, el "<strong><iframe>" y "</strong>"Las etiquetas pueden ser muy útiles. Estas etiquetas permiten a los desarrolladores incrustar videos directamente en el sitio web sin la necesidad de descargar esos videos. Para realizar esto, se requiere el enlace de video de incrustación al que se puede acceder siguiendo la guía corta a continuación:</p> <ul> <li>Primero, seleccione el video de YouTube que el usuario desea mostrar en su página web. Luego abra la lista de opciones para ese video. Después de eso, busque y seleccione el "<strong>Compartir</strong>" opción:</li> </ul> <ul> <li>Después de eso, se abre la ventana corta y seleccione el "<strong>Empotrar</strong>"Opción desde aquí:</li> </ul> <ul> <li>Después de eso, se genera el enlace de video de incrustación y copie la URL:</li> </ul> <p>Después de copiar el "<strong>Empotrar</strong>"Código de video, inserte como un valor del"<strong>SRC</strong>"Atributo en el"<strong><iframe></strong>" etiqueta:</p> <br><h1>Impulsado por 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>

Ahora, para mostrar el mismo video de YouTube usando el "" etiqueta. Insertar el "SRC"Valor de atributo en el"datos"Atributo del"" etiqueta:

Después de ejecutar los códigos anteriores, la página web se ve así:

En el GIF anterior, el primer video de YouTube se ha mostrado en la página web.

Conclusión

Para agregar y reproducir videos en la página web, los usuarios pueden utilizar el """, "", y "</strong>"Etiquetas HTML. El ""La etiqueta está envuelta por el""Etiqueta para mostrar el archivo de video en la página web. Para el "<strong><iframe></strong>"Etiqueta, coloque el camino de la imagen en su"<strong>SRC</strong>" atributo. Y para el ""Etiqueta coloque la ruta de la imagen como un valor para el"<strong>datos</strong>" atributo. Este artículo ha demostrado cómo agregar y reproducir videos en una página web utilizando 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://es.cyberaxe.org/article/how-to-create-html-bullet-points">« Cómo crear puntos de bala HTML?</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://es.cyberaxe.org/article/how-can-flexbox-be-used-to-create-a-navigation-bar">¿Cómo se puede utilizar Flexbox para crear una barra de navegación?? »</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://es.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-is--in-c">Que es += en c++?</a> </div> <div class="white-news__text"> En c ++ el+= es una combinación de dos operadores, uno es el operador de adición y el segundo es el ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-are-the-steps-to-run-remote-commands-in-powershell">¿Cuáles son los pasos para ejecutar comandos remotos en PowerShell??</a> </div> <div class="white-news__text"> Los comandos remotos se pueden ejecutar habilitando el control remoto de PowerShell. Para habilitar ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-install-windows-powershell">Cómo instalar Windows PowerShell</a> </div> <div class="white-news__text"> Para instalar PowerShell primero, navegue a la tienda de Microsoft y busque PowerShell. Una vez que ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</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://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/python-os-mkdir">Python OS Mkdir</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jose-luis-villagomez">José Luis Villagómez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/introduction-to-golang-programming-language">Introducción al lenguaje de programación de Golang</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/linux-commands">Comandos de Linux</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-get-the-version-of-cuda-installed-on-linux">Cómo instalar la versión de CUDA en Linux</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jose-luis-villagomez">José Luis Villagómez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/golang">golang</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Cómo convertir la cadena al tipo entero en Golang?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/javascript">Javascript</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-does-w-metacharacter-do-in-regexp-of-javascript">¿Qué hace W Metacharacter en Regexp de JavaScript?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-create-html-bullet-points">Cómo crear puntos de bala HTML?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-cache-oracle-sequence-to-improve-data-dictionary-resources">Cómo almacenar en caché de la secuencia de Oracle para mejorar los recursos de diccionario de datos?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/linux-commands">Comandos de Linux</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-generate-ssh-keys-on-windows-top-10top-10-to-access-linux-servers-without-passwords">Cómo generar las teclas SSH en Windows Top 10/Top 10 para acceder a los servidores Linux sin contraseñas</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c-programming">Programación C</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-are-strings-in-c-programming">¿Qué son las cuerdas en la programación C??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/hernan-delao">Hernán Delao</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-while-loop-in-php">Cómo usar While Loop en PHP?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jose-luis-villagomez">José Luis Villagómez</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sitio sobre el sistema operativo Linux. Aquí encontrará muchos artículos interesantes y guías útiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/python">Pitón</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/docker">Estibador</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/r">Riñonal</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a></li> </li> <li class="menu-item"><a href="http://es.cyberaxe.org/all-categories"><b>Todas las categorias</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>