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/docker">Estibador</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-kill-a-docker-container">Cómo matar un contenedor Docker?</a> </div> <div class="white-news__text"> Para matar un contenedor Docker, primero, elija un contenedor en particular que debe ser asesinado. ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-morales">Lorenzo Morales</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/aws">AWS</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-are-aws-step-functions-and-how-to-use-them">¿Cuáles son las funciones del paso de AWS y cómo usarlas??</a> </div> <div class="white-news__text"> Las funciones del paso de AWS se crean para realizar tareas secuenciadas y proporcionar la interfaz ... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/salvador-anaya">Salvador Anaya</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/php">php</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-break-and-continue-in-php">Cómo usar el descanso y continuar en PHP?</a> </div> <div class="white-news__text"> En PHP, la instrucción Break se usa para terminar un bucle o una instrucción de interruptor mientras... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</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-list-to-comma-separated-string">Lista de Python a una cadena separada por comas</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/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/numpy-astype">Astype numpy</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/daniela-villasenor">Daniela Villaseñor</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-system-io-namespace-in-c">¿Qué es el sistema?.IO espacio de nombres en C#</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/lorenzo-morales">Lorenzo Morales</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/salesforce">Fuerza de ventas</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/salesforce-data-loader">Cargador de datos de Salesforce</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/homero-ontiveros">Homero Ontiveros</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-elastic-beanstalk-is-it-paas-or-iaas">¿Qué es elastic beanstalk?? ¿Es Paas o Iaas??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-type-conversion-in-java">¿Qué es la conversión de tipo en Java??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/homero-ontiveros">Homero Ontiveros</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-add-and-play-videos-on-a-webpage-using-html">Cómo agregar y reproducir videos en una página web usando HTML?</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/powershell">Potencia Shell</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/can-you-explain-the-functionality-of-powershells-get-location-command">¿Puedes explicar la funcionalidad del comando de ubicación de PowerShell??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/salvador-anaya">Salvador Anaya</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/powershell">Potencia Shell</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-rename-item-command-in-powershell">¿Qué es el comando renombrar en PowerShell??</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/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-aws-aurora-and-mysql">¿Cuál es la diferencia entre AWS Aurora y MySQL??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/andres-barrientos">Andrés Barrientos</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>