jueves, 26 de marzo de 2020

HTML con complementos de audio y video

Hola bienvenidos a un post mas del blog programación para todos, hemos visto varios ejemplos en el blog de como poder crear nuestras páginas WEB ya sean Estáticas con HTML o Dinámicas con PHP, ASP, Javascript o tener páginas mas completas con ayuda de Wordpress o Wix.

Esta semana les quiero mostrarles un ejemplo de HTML pero ahora con complementos de audio y vídeo en nuestras páginas WEB

El complemento de audio soporta 3 tipos de archivos: ogg,mpeg,wav  tiene como atributos:

Controls: que nos permite mostrar los controles de play, pausa, adelantar, atrasar
Src: es para indicar cual es el archivo origen que se reproducirá
Mute: que es para silenciar el audio
Loop: para ejecutar el audio de manera continua

Para escribir la pagina web es:
<audio controls>
  <source src="prueba.ogg" type="audio/ogg" controls=true>
  <source src="prueba.mp3" type="audio/mpeg">
  <source src="prueba.wav" type="audio/wav">

</audio>

El complemento de Video, nos permite ingresar un espacio en la pagina para reproducir un video, los formatos que soporta son mp4,ogg


<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.

</video>

En mi ejemplo mi código de mi pagina es


<html>
<head>
<title>Ejemplo audio y video</title>
</head>
<body>
<p> Como utilizar los controles de auido </p>
<audio controls>
  <source src="elementary-podcasts-s01-e03.mp3" type="audio/mpeg" controls=true>
  Your browser does not support the audio tag.
</audio>

<p> Como utilizar los controls de video </p>
<video width="320" height="240" controls>
  <source src="videoejemplo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>

</html>


La imagen de como se ve


Este ejemplo que les compartí , podría estar configurado con un servidor FTP donde pueden subir sus archivos de podcast o de películas o de canciones que ustedes hagan y con un programa PHP o ASP podrían ir listando todos los archivos y de acuerdo a la extensión habilitar el control de vídeo o audio, páginas como estas ya existen. Espero que esto les sirva para entender este tipo de páginas o se animen hacer sus propia página.


No hay comentarios.:

Publicar un comentario