El video se ha convertido en un elemento clave en la creación de contenido web. Y aunque existen muchas formas de publicarlos, la reproducción de videos en HTML ha ganado mucha popularidad. Si tú también quieres aprender cómo hacerlo, estás en el lugar correcto. En este artículo te explicaremos cómo reproducir videos en HTML, de manera sencilla y efectiva. ¡No te lo pierdas!
Agregar video brinda a sus visitantes una gran experiencia más rica. Afortunadamente, agregar contenido de video a sus páginas HTML es mucho más fácil que nunca.
Sin embargo, cada método de agregar video tiene su propio ventajas y desventajas. Si bien hay muchos métodos diferentes que se pueden usar para agregar videos a sus páginas, aprovechar YouTube parece ser el más fácil para implementar.
tenga en cuenta que algunos de los métodos enumerados a continuación son no soportado en HTML 4.01. Debe tener un navegador compatible con HTML 5 o la instalación requiere que Flash esté instalado en la computadora del usuario.
Estas son las formas más comunes de agregar un video a sus páginas web.
Elemento iFrame
Encuentro que este es el la manera más fácil para agregar un video a tu página. YouTube ya le proporciona un enlace a un reproductor incrustado, simplemente haga clic en el Compartir botón para acceder al código.
Todo lo que necesita hacer es agregar un iframe a su página y asigne la URL correcta a la src atributo de la iframe. Este método requiere un navegador que soporte HTML 5 o Flash. Aquí hay un ejemplo.
<iframe width="560" height="315" src="http://www.youtube.com/embed/Bzohr7uqBS0" frameborder="0" allowfullscreen</iframe>Elemento de vídeo
El <video> El elemento es un elemento HTML 5. Dentro de <video> elemento, puede agregar múltiples <source> elementos para que el navegador puede elegir que archivo es mejor descargar. Aquí hay un ejemplo.
<video poster="movie.jpg" controls="controls">
<source src="https://www.itgeared.com/html-embed-play-youtube-videos-to-your-pages/movie.webm" type="video/webm"/>
<source src="movie.ogg" type="video/ogg"/>
<source src="movie.mp4" type="video/mp4"/>
Text content in the event that no video can be played.
</video>Elementos incrustados y objetos
También puede utilizar el <embed> y/o <object> elementos para intentar reproducir elementos multimedia en páginas HTML. Aquí hay un ejemplo de cómo mostrar un video Flash usando ambos elementos.
Mientras que la <object> elemento es compatible con HTML 4, el <embed> el elemento no lo es. Si el el navegador no es compatible destello, el el video no se reproduce. Usar este método no es fácil cuando se admiten varios tipos de navegadores.
<embed src="https://www.itgeared.com/html-embed-play-youtube-videos-to-your-pages/demo.swf" height="250" width="250"/>
<object data="https://www.itgeared.com/html-embed-play-youtube-videos-to-your-pages/demo.swf" height="250" width="250"/>Utilice soluciones múltiples
Otro método es utilizar varios elementos de modo que es probable que el navegador del usuario admita al menos un método. Tenga en cuenta que esta opción incluye elementos HTML 4 y HTML 5.
Para que tu página validar correctamentedeberá utilizar el DOCTYPE de HTML 5, <!DOCTYPE HTML>.
En este ejemplo, el navegador intentará reproducir el video usando uno de los elementos en este orden: video, objectentonces embed. Aquí hay un ejemplo.
<video poster="movie.jpg" controls="controls">
<source src="https://www.itgeared.com/html-embed-play-youtube-videos-to-your-pages/movie.webm" type="video/webm; codecs="vp8.0, vorbis""/>
<source src="movie.ogg" type="video/ogg; codecs="theora, vorbis""/>
<source src="movie.mp4" type="video/mp4; codecs="avc1.4D401E, mp4a.40.2""/>
<object data="https://www.itgeared.com/html-embed-play-youtube-videos-to-your-pages/demo.swf" height="250" width="250">
<embed src="https://www.itgeared.com/html-embed-play-youtube-videos-to-your-pages/demo.swf" height="250" width="250">
Text content in the event that no video can be played.
</embed>
</object>
</video>De nuevo, mi sugerencia es implementar una solución de video que sea facil de mantener sin dejar de satisfacer las necesidades de sus usuarios. encuentro que usando iframes funciona mejor para la mayoría de los escenarios, especialmente si su multimedia está alojada por YouTube.
