HTML con complementos de audio y video

marzo 26, 2020

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>

Your browser does not support the audio tag.

</audio>

<p> Como utilizar los controls de video </p>

Your browser does not support the video tag.

</video>

</body>

</html>

Captura de pantalla de como se ve el audio en la pagina WEB

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.

04 de abril 2020

Me hicieron una pregunta en La web de programador, donde también subo algunos comentarios, la pregunta era como puedo hacer la selección de varios vídeos en una página y le comentaba lo mismo que les decía o necesitas PHP o ASP, pero estuve pensando como hacerlo con Javascript si solo pocos archivos que quieren listar (pocos yo creo unos 10) , les compartó el código para que puedan utilizarlo.

<!DOCTYPE html>
<head>
<title>
Otra forma de seleccionar archivos
</title>
</head>

<body>


<p>
Selecciona tu Video:
<select id="select1">
<option value="videoejemplo.mp4">videoejemplo</option>
<option value="VID_20191231_075219.mp4">VID_20191231_075219</option>
<option value="VID_20191231_075709.mp4">VID_20191231_075709</option>
</select>
</p>

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

<button onclick="changeSource()">
Check option
</button>


<script type="text/javascript">
function changeSource() {
selectElement =
document.querySelector('#select1');
url = selectElement.value;
var video = document.getElementById('videocon');
video.src = url;
video.play();
}
</script

</body>


</html>

Espero este programa les sea de utilidad, compartan el post y nos sigan en el #programacionparatodos y en nuestra página de Facebook

Programación para todos