Ir al contenido principal

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>


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


Comentarios

Entradas más populares de este blog

Graficar funciones en Python con dataframes

Bienvenidos a un nuevo post, en esta semana, en esta ocasión les quiero platicar acerca de una librería en Python que se llama  matplotlib  que nos sirve para gráfica funciones de  matemáticas. Habitualmente en Python existen muchas librerías, lo que hay que hacer es primero investigar si ya existe alguna que nos ayude y entenderla antes de inventar el hilo negro, en mi caso encontré la librería  Matplotlib Para instalar deben utilizar el comando PIP en 2.7 Instalando en Python 3.7 Si tienen Python 2.7 deben realizar la ejecución de estos 2 comandos desde consola python -m pip install -U pip python -m pip install -U matplotlib Aunque lo más recomendable es utilizar la versión 3.7 o superior de Python. Programa para graficar en Python import matplotlib.pyplot as plt import numpy as np import math as mt def move_spines():     """Esta funcion divide pone al eje y en el valor      0 de x para dividir claramente los valores positivos y     negativos.&quo

Ejemplo Macro en Word

Hola: ¿Sabían que no solo en Excel pueden hacer Macros?  ¡¡¡También en Outlook, Word, Power Point,Access  es posible hacer Macros!!!  ☺️ Ya que Word, Excel, Power Point,Access son de familia Microsoft y Visual Basic también es que podemos programar nuestras macros en esta paquetería. Como hemos visto antes, para poder programar nuestras macros, necesitamos primero configurar la Barra de tareas de Developer o Desarrollador Seleccionan el Menu File>Options>Customize Ribbon o en Español Archivo>Opciones>barra de tareas Despues la parte de seguridad de las macros Menu File>Options>Trus Center o Archivo>Opciones>Centro de Seguridad y marcamos como se ve en la imagen, la cuarta opción y el combo Ejemplo Vamos hacer un ejemplo donde, tengamos que generar varios diplomas de fin de curso, pero con una lista de Nombres , entonces vamos a crear un nuevo archivo en Word y le vamos a guardar como tipo Macro  Tenemos una plantill

Macro de Excel para abrir archivo csv

Hay veces que quieres abrir un archivo de Excel pero está separado por comas, punto y coma o por un pipe. Hay formas de hacerlos desde Excel. Les quiero compartir algunas opciones de como hacerlo y espero que les sean de utilidad. 1.Es abrir el archivo en Excel y utilizar la función de separar por columnas y seleccionar el delimitador, por ejemplo ";" 2. Es colocar "sep=;" en el primer renglón del archivo que quieres abrir y guardar en formato CSV y abrirlo en Excel y te lo abrirá separado en columnas. 3. Otra forma es con una macro, esté en mi gusto es la que más me funciona porque si hay alguna coma en la descripción o en alguna columna, si lo abres desde Excel te va a desacomodar las columnas.  Este botón te abrirá un pantalla para abrir el archivo que quieres separar y te lo abrirá en una hoja de excel ya separado. El código de la macro es el siguiente  Private Sub CommandButton1_Click() Dim sht As Worksheet Dim fnd As Variant Dim rplc As Variant Dim