Insertar video en HTML5
https://engineerdesistemas.blogspot.com/2016/11/insertar-video-en-html5.html
Con HTML5 es posible insertar contenido multimedia sin necesidad de recurrir a plugins externos como se lo realizaba antes. Por lo que nuestros contenidos serán mejor enriquecidos y en lo visual tendrá un aspecto diferente si colocamos videos con tan solo el uso de una etiqueta: "video" y manejando sus respectivas propiedades.
Dentro de la etiqueta video podemos manipular los siguientes atributos.-
controls: para hacer visible los controles de reproducción del video.
width y height: manejamos el ancho y alto del video, se puede expresar en pixeles o porcentaje.
Además observamos las etiquetas "source".-
src: la localización en donde se encuentra el archivo de video para su posterior reproducción en linea.
Notarán que también un mismo video es invocado en sus diferentes formatos tanto .ogg, .mp4 y .webm debido a que es posible que algún navegador no sea capaz de leer alguno de ellos, aunque actualmente esto no debería suceder.
El resultado en pantalla es el siguiente:
El código a usar queda así:
<!DOCTYPE html>
<html>
<head></head>
<body>
<video controls="controls" width="550" height="350">
<source src="videos/archivo.ogg" type="video/ogg">
<source src="videos/archivo.mp4" type="video/mp4">
<source src="videos/archivo.webm" type="video/webm">
Es increible que este navegador no soporte HTML5
</video>
</body>
</html>
Dentro de la etiqueta video podemos manipular los siguientes atributos.-
controls: para hacer visible los controles de reproducción del video.
width y height: manejamos el ancho y alto del video, se puede expresar en pixeles o porcentaje.
Además observamos las etiquetas "source".-
src: la localización en donde se encuentra el archivo de video para su posterior reproducción en linea.
Notarán que también un mismo video es invocado en sus diferentes formatos tanto .ogg, .mp4 y .webm debido a que es posible que algún navegador no sea capaz de leer alguno de ellos, aunque actualmente esto no debería suceder.
El resultado en pantalla es el siguiente:
