Unidad 4

Manejo de Formularios

Manejo de audio y vídeo

El manejo de información ingresada por el usuario por medio de etiquetas especiales de HTML conocidas como controles, preceden nacimiento de JavaScript. Estas etiquetas tuvieron mucho que ver con los comienzos de JavaScript para validar y procesar la información ingresar por el usuario antes de ser enviada al servidor.

No es necesario JavaScript para la manipulación de datos ingresados, en tal caso, JavaScript ayudaría a organizar y validar los datos y, en función de ellos, reaccionar con un cierto comportamiento más complejo. La utilización de los controles no se limita al envío de datos al servidor, también se utiliza del lado del cliente para ejecutar ciertos procesos.

La obtención de datos que ingresa el usuario se hace mediante objetos gráficos como cuadros de textos y botones. Estos datos son tomados y pasados a objetos que se los llena de datos y, con este objeto, se envían los datos al servidor.

Formulario

Propiedades más importantes:

acceptCharset — el tipo de caracteres que será procesado por el servidor. El valor por defecto es: "UNKNOWN", lo que indica que se utilizará el valor del codeado que utilice el documento que contiene la etiqueta <form>. Los más utilizados son: utf-8 para unicode o ISO-8859-1 para alfabeto latino.

action — la URL a la cual serán enviados los datos.

elements — lista de todos los controles que tiene el <form>.

length — cantidad de controles en el formulario.

method — el tipo de pedido HTTP que puede ser un String: getpost.

Algunas aclaraciones para el tipo get: *

— El largo máximo de caracteres es de 3000.

— Los datos serán visibles en donde se muestra la dirección URL. Si se quieren ocultar al usuario debería utilizarse post**

— Esta técnica es útil para guardar el resultado en favoritos del link.

*GET es usado para solicitar datos desde un recurso especificado.

**POST es usado para enviar datos al servidor para crear/actualizar un recurso.

Algunas aclaraciones para el tipo post:

— No tiene un límite máximo.

— No se ve el pedido en la dirección de la URL.

— No se puede guardar en favoritos o el link del pedido.

name — nombre del formulario.

Métodos:

reset() — cambia los valores de los controles a su valor por defecto.

submit () — Envía los datos recolectados.

Controles

Veamos los diferentes controles que tenemos a disposición para obtener los datos de distintas maneras.

Tenemos entidades muy bien diferenciadas de campo de texto botones de selección como check box y ratio button.
En HTML5, tenemos una entidad llamada <input> que permite presentar al usuario diferentes maneras de ingresar datos.

Esta etiqueta es una de las etiquetas más antiguas de HTML y, en el HTML5, se le han agregado características que lo hacen más útil tanto para el desarrollador como para el usuario.

Etiqueta <label>

Algo común a todos los controles es la etiqueta <label>. Esta etiqueta es solamente un texto descriptivo para el usuario de un control determinado.

Se puede producir la activación de un control correspondiente a un <label> mediante el ratón de dos maneras:

Utilizando un mismo valor para el atributo for del <label> y el atributo name del control.
Metiendo el control como hijo de <label>.

Etiqueta <input>. Ingreso de datos

Existe una manera genérica de obtener datos por ingreso de texto y se hace utilizando la etiqueta <input>. La manera de determinar de que se muestre un cuadro de texto para ingreso de texto es mediante el atributo: type. Este atributo determinará el tipo de control que se desplegará.
Veamos un ejemplo para desplegar un cuadro de texto para entrada de texto que por ahora no enviará ningún dato, por lo tanto, no agregaremos atributos a la etiqueta <form> por ahora, solamente no ocuparemos de los controles.

<form>
<label for="nombre">Nombre:</label>
<input name="nombre" type="text" />
</form>

En HTML5, el atributo type, basados en la semántica (que hemos visto anteriormente), se ha tornado más significativo ya que aparte de tener mucho más sentido para el desarrollador, aporta.
control un validador en base a valores predefinidos que se le pueden darle a type. Si bien se encuentran a disposición un sinnúmero de recurso en la Web para encontrar todos los tipos de input, para brindar un por de comodidad listaré los tipos más comunes con los detalles más importantes.

Tipo email

La buena noticia es que por ejemplo si en type, utilizáramos el valor email, todo navegador que soporte HTML5 mostrará un mensaje en caso que el valor ingresado por el usuario no sea válido. Sin necesidad (tengamos que utilizar un código para validar email.)

¿Qué sucede si un navegador no soporta esta nueva caracterisrica de HTML5? Lo que hace el navegador cuando se encuentra con un valor del atributo type que no reconoce es tratarlo como si tuviera el valor text.

Revisemos este ejemplo:
ejemploF_01.html

Al hacerle clic a este botón, se producirá automáticamente la validación del campo. Si todo está bien, provocará el envío de los datos de acuerdo al atributo action que se haya asignado en la etiqueta <form> que contiene el o los dos controles.

Si ingresáramos un valor no válido para el email, veríamos un mensaje automático con un formato determinado dependiendo del navegador en el que se pruebe:

Por ejemplo, en Chrome, se vería así:

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_1_unidad_4.png)

Tipo url

Este tipo se refiere a las direcciones Web (si lo has deducido por el nombre, es que la semántica funcional). Este campo permite validar lo mínimo requerido para la dirección de un sitio Web. El único chequeo automático que se efectuará es que aparezca el texto: http://. Incluso si solo se pusiera ese texto el navegador lo daría por válido. En cambio, si pusiéramos una URL como ironmaiden.com o www.ironmaiden.com, no reconocería el texto ingresado como una URL válida.

ejemploF_02.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_2_unidad_4.png)

Tipo search

Este tipo de texto se utiliza para el campo de búsqueda dentro del sitio que, por lo general, aparece en el encabezado del sitio o blog. A primera vista, podría parecer que se trata solo de un campo de texto. Sin embargo, tiene una pequeña particularidad y que aparece un botón dentro del campo de texto que permite borrar el texto ingresado.

ejemploF_03.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_3_unidad_4.png)

Tipo password

Este tipo provoca que a medida que el usuario vaya escribiendo, en lugar de aparecer los caracteres escritos aparece un carácter sustituto como por ejemplo un asterisco (*).

ejemploF_04.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_4_unidad_4.png)

Texto indicador para reemplazo - placeholder

En los casos en los que quieras indicar en el mismo campo a llenar qué tipo de dato debería ir, puedes utilizar el atributo: placeholder. Al momento que el usuario haga clic en el campo para ingresar el dato, el texto de reemplazo desaparecerá y se irá viendo el texto que se vaya ingresando. Los navegadores que no soporten esta nueva característica ignorarán este atributo y, en el campo, no se verá el texto de reemplazo.

ejemploF_05.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_5_unidad_4.png)

Tipo number

Este tipo viene en varios sabores, dependiendo del tipo de facilidad que quieras darle al usuario. Se puede ofrecer que ingrese los números a mano ayudado de botones con icono de una flecha, una para aumentar y otra para disminuir una cifra en base a una cantidad determinada en cada clic. Deberemos tener en cuenta que esta forma de representación no se encuentra disponible en todos los navegadores.

El tipo number permite determinar un rango de números, entre un mínimo con el atributo min y un máximo con el atributo max. Para determinar la cantidad de números que se incrementarán o disminuirán en cada clic de las flechas, se utiliza el atributo: step (paso).

Los navegadores que no soporten el tipo number, lo representarán como del tipo text, pero no estarán disponibles las opciones max, min, y step, se deberá contemplar un código JavaScript para su control.

Basados en la apertura del tema de Iron Maiden: “El Prisionero”, daremos a elegir un número entre 1 y 6 y con los botones de pasos permitiremos que se pueda aumentar o disminuir de 1 en 1.

ejemploF_06.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="description" content="Ejemplo" de=" Formularios">
    <meta name="keywords" content="CECATI" no.="89",ciudad=" Celaya, Guanajuato=">
    <title>Conociendo Formularios</title>
  </head>
 <body>
<form>
<label for="numero" >Numero</label>
<input name="numero" type= "number"
min = "1"
max = "6"
step = "1"
/>
<input id="submit" type="submit" value="OK"/>
</form>

</body>
</html>

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_6_unidad_4.png)

Tipo range

Otra manera de representar la selección de números es mediante el tipo range.

De esta manera, aparecerá un deslizador que permitirá en función del atributo step, seleccionar un valor dentro de un rango determinado.

ejemploF_07.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="description" content="Ejemplo" de=" Formularios">
    <meta name="keywords" content="CECATI" no.="89",ciudad=" Celaya, Guanajuato=">
    <title>Conociendo Formularios</title>
  </head>
 <body>
<form>
<label for="numero">Numero:</label>
<input name="numero" type="range"
min = "1"
max = "6"
step = "1"
/>
<input id="submit" type="submit" value="OK"/>
</form>

</body>
</html>

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_7_unidad_4.png)

Tipo checkbox

Este tipo permite seleccionar varias opciones predeterminadas. Todas estas opciones estarán a la vista con icono que nos mostrará si está o no tildado.

Es buena idea que agregar la etiqueta <label> por cada check box, desde esta manera el usuario tiene un área mayor para hacer clic, tanto en el check box propiamente dicho como en el texto.

ejemploF_08.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_8_unidad_4.png)

Tipo radio

Este tipo de control permite seleccionar solo un ítem de un conjunto de opciones. Siempre queda marcado el último seleccionado. Para que solo quede seleccionado un solo radio button, de manera automática, el atributo name de cada control debo tener el mismo valor.

ejemploF_09.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_9_unidad_4)

Listas de opciones <select> y <option>

Podríamos necesitar que el despliegue de una lista de opciones de las cuales elegir una como podría ser una lista de países. Veremos que esta lista podría ser desplegable, es decir, desde un campo desplegar una lista o bien mostrarla desplegada directamente.

Como siempre, la forma de hacerlo es dentro de una etiqueta <form> utilizando la etiqueta <select> como el campo a través del cual desplega la lista. Cada elemento de la misma se maneja con la etiqueta <option>, estas etiquetas serán hijas de la etiqueta <select>. La variable seleccionada estará vinculada al atributo name de la etiqueta <select>.

ejemploF_10.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_10_unidad_4)

También podríamos configurar una lista desplegada.

ejemploF_11.html

Prueba con los navegadores de Chrome, Edge, IE, FireFox, Opera, o los que tengas en tu computadora, y enviar la evidencia de estos mensajes.(evidencia_11_unidad_4)

Manejo de audio y vídeo

Actualmente, HTML5 soporta la reproducción de audio y vídeo sin necesidad de utilizar plug-ins. En los navegadores que lo soportan, solo es necesario utilizar una etiqueta, con diferentes opciones de configuración y tomar algunos recaudos que veremos en detalle a la fecha de esta publicación. El soporte de audio y vídeo en HTML5 es la última cadena a romper para no necesitar más de plug-ins.

El mismo navegador es suficiente para desplegar audio y vídeo y, además, los respectivos controles como volumen, avance, etc.

Existen como siempre, muchos aspectos a ser tratados, nosotros nos centraremos en los más básicos.

Aunque el desarrollo de las funcionalidades de HTML5 está en constante y rápida evolución, al momento de esta publicación, el último recurso a utilizar en caso que el elemento de vídeo no sea soportado es el uso de un vídeo Flash.

El soporte de audio y vídeo en HTML5 se basa en las etiquetas <audio> y <vídeo>. Esto significa, como decíamos antes, que no es necesario descargar ningún plug-in y que estas etiquetas pueden ser estilizadas con CSS y controladas con JavaScript como cualquier otra etiqueta HTML.

Comenzaremos por los elementos multimedia que más aristas presenta.
Lo primero que debemos tener en cuenta es que tenemos 4 actores principales:

1. El archivo de audio o vídeo propiamente dicho

2. El Codec

3. El navegador

4. La API para controlar el audio o vídeo

(nota: Un codec es un programa o dispositivo hardware capaz de codificar o decodificar una señal o flujo de datos digitales.​ Códec es un acrónimo de codificador-decodificador o, menos comúnmente, compresor-descompresor. Su uso está muy extendido para la codificación de señales de audio y vídeo dentro de un formato contenedor.)

Formatos de audio y vídeo

Existen diversos formatos de audio y vídeos. El formato determina cuánto se comprimirá el audio o vídeo y la calidad que tendrán. De la misma manera que sucede con las imágenes y sus formatos JPG, PNG, GIF, los diferentes formatos de audio o vídeo presentan características que harán ver, oír y pesar un mismo archivo de diferentes maneras en base al formato utilizado.
Los formatos empleados por los navegadores no están estandarizados, esto hace un tanto dificultoso el uso de audio y vídeo aunque la implementación en sí misma es muy simple como veremos a continuación:

<audio src="painkiller.mp3"/>
<vídeo src="capitan_harlock .mp4"/>

Este código es la mínima expresión de este elemento multimedia.

Sin embargo, dada la incompatibilidad existente entre los navegadores nos lleva a necesitar más código para en caso de que un formato no sea soportado, existan otras alternativas para mostrar el elemento multimedia.

Los formatos de vídeo podemos diferenciarlos básicamente por la extensión del archivo. Esta extensión; sin embargo, no determina cómo está guardado el vídeo y actúa como un contenedor de datos que puede incluir por ejemplo: el vídeo propiamente dicho, el sonido, datos sobre el vídeo como el nombre y autor.

Como decíamos la extensión del vídeo para la Web pueden ser: .mp4, . ogg, .web. .webm. Estos, en sí mismos, no determinan cómo ha sido guardado el vídeo, simplemente funcionan como contenedores como lo haría un archivo . zip. La forma en la que el audio o vídeo han sido guardados, es decir “encodeados” está dada por el codec.

El codec es un algoritmo de compresión. Para que un reproductor que pueda reproducir un vídeo, el mismo debe poseer el codec correspondiente al vídeo para poder interpretarlo. Es decir, descomprimirlo y reproducirlo. Es algo muy parecido a encriptar y desencriptar un mensaje mediante un “código secreto”. El código secreto es el algoritmo y mediante el mismo se puede decodificar lo que está en el archivo contenedor y luego reproducirlo.
Tantos los archivos contenedores como los codees no son interpretados por todos los navegadores. Para cubrir las posibilidades de los navegadores más usados, debes preparar tu vídeo para estas posibilidades, generando diferentes formatos de vídeo para cada caso.
Por último, es importante resaltar que no todos los contenedora son compatibles con todos los codecs.

Para mantener la compatibilidad, solo necesitamos suministrar en la etiqueta de <audio> o <vídeo> los diferentes tipos de formato, es decir, por cada vídeo generar varios archivos con diferente formato.
El problema de tener que generar diferentes formatos de un mismo vídeo no es de HTML5, sino de la disparidad de compatibilidad entre los navegadores.

Lo que haremos entonces, es colocar en la etiqueta, la invocación a los diferentes vídeos. El navegador basado en el atributo type, sabiendo que vídeo puede cargar. En algunos casos, el navegador intentará carga el primer vídeo que aparece en la lista, sino puede hacerlo, pasará siguiente vídeo. Si se encuentra con un vídeo que puede reproducir, lo hará y dejará de intentar cargar otros vídeos si los hubiere.
En caso que el navegador no soporte HTML5 o que soporte HTML5 no los vídeos listados, simplemente mostrará la etiqueta.

(Comentario personal funcionan muy bien estos formatos .mp4, .webm, .jpeg, con los navegadores actuales aunque se recomiendo .mkv)

A continuación, un ejemplo de uso de la etiqueta <vídeo>.

ejemploV_01.html

Se puede agregar, por ejemplo, un texto, que solo se verá en los casos donde ningún formato sea soportado. En este ejemplo, agregamos una etiqueta <p> luego de las etiquetas <source>.

Si se usara el atributo src directamente en la etiqueta <vídeo>, los navegadores utilizarán este atributo y todas las etiquetas <source> serán ignoradas.

Resultado:

para poder verlo debemos hacer clic en el vídeo botón derecho les mostrara la opcion de Mostrar todos los controles:

Realiza un ejemplo con un video que tengas a la mano o bien descargarlo desde Internet (que no sea muy grande) y envias la evidencia, una captura de pantalla no es necesario que envies el video con la pagina, lo nombraras evidencia_12_unidad_4.png

Generar los diferentes formatos

Existen distintas opciones para la conversión de un vídeo en los diferentes formatos de HTML5. Puede ser tanto un programa como un conversor on-line.

Veremos una alternativa de la cual hay versiones para Mac / Windows. Me resulta la más práctica, sencilla y por supuesto es totalmente gratis. Se llama: Miro. Se puede descargar desde http://www.mirovídeoconverter.com/

Hay que tener cuidado al instalar. Cuando te presente la opción aceptar los términos y condiciones, no lo hace por el programa en sí, es solo para instalarte una molesta herramienta en tu navegador, fíjate Ignorar o bien seleccionar las opciones avanzadas y destildar todas Ias demás que te ofrezca que no tengan que ver con el programa en sí.

El formato Webm es un formato de archivo de medios audiovisuales cuyo principal objetivo es ofrecer una alternativa libre de derechos de autor utilizable en elementos de audio y vídeo HTML5. También es una alternativa a los estándares patentados MPEG4 y H.264, Este formato fue introducido por Google en 2010. Se utilizan los códecs de vídeo VP8 y VP9, así como los códecs de audio Vorbis y Opus.

MPEG4 Es un estándar usado principalmente para comprimir datos digitales de audio e imagen. Fue introducido en 1998 por el grupo MPEG de la ISO/IEC bajo el estándar formal de ISO/IEC 14496. Los usos para este estándar es la distribución de contenidos por la web, soporte físico (CD, DVD y discos de alta definición), vídeoconferencia y televisión.

 H.264 MPEG-4 AVC (Advanced vídeo Coding) El estándar de compresión de vídeo, conocido también como MPEG-4 Parte 10, Advanced vídeo Coding, MPEG-4 AVC o vídeo AVC, es un estándar de la industria para la compresión de vídeo y se trata de uno de los formatos de vídeo más utilizados hoy en día.

H.264 cubre todos los aspectos de nuestra vida digital y su popularidad va en aumento. Verá este códec por ejemplo con HD DVD, HDTV, pay-TV o vídeos en YouTube. Y H.264 no se limita solo a la electrónica de consumo. Su uso también está muy presente en los negocios.

Se calcula que para 2025 las soluciones de distribución de vídeo más convencionales que utilicen HDBaseT u otros métodos de transmisión propietarios serán sustituidos por sistemas IP más versátiles, debido a que la popularidad de H.264 continua aumentando.

MKV (Matroska vídeo), es uno de los formatos más recientes en el mundo audiovisual, cuenta con el mismo tipo de formato del AVI, VOB y MPGE. Es conocido como el almacén de vídeo libre, tiene la habilidad de contener cualquier clase de información audiovisual (audio-vídeo), es decir, permite la reproducción de una pista de vídeo con una de audio y además con infinitos archivos de subtítulos incluidos.

Los archivos MKV son considerados también como formatos flexibles, ya que pueden acoger varias películas con audio en varios idiomas incluyendo sus respectivos subtítulos para que el usuario tenga la libertad de seleccionar el que mejor le convenga. Cabe mencionar que el formato MKV no es un formato de compresión de vídeo o audio, sino un formato contenedor de multimedia.

Controles y atributos del elemento vídeo

Controles de vídeo

La sola presencia del atributo autoplay dentro de la etiqueta <vídeo> es suficiente para que los navegadores que soportan el vídeo en HTML desplieguen los controles correspondientes.

En nuestro ejemplo, el código del elemento <vídeo> se vería de la siguiente manera:

Para iniciar (start) un vídeo usamos los controles del vídeo con el atributo controls:

ejemploV_02.html

Resultado:

En la parte inferior se muestran los controles del vide, prueben con diferentes navegadores

Evidencia: Tomen una fracción de un vídeo y agreguen controles como en el ejemplo anterior, y la envian al correo y mencionan que es la evidencia_13_unidad_4.png

Atributos de <vídeo>

Autoplay La presencia de este atributo provocará que el vídeo comience reproducirse en cuanto esté disponible, automáticamente sin acción del usuario.

Loop La presencia de este atributo hace que el vídeo se vuelva a reproducir automáticamente luego de haber llegado al final.

width="320" height="240"  Alto y ancho Mediante las propiedades width y height, se pueden asignar las medidas del vídeo. La medida es en píxels. Especificando la medida, el navegador reservará ese espacio para mostrar el vídeo. Si no se utilizan este atributos otros elementos que acompañen al vídeo se reacomodarán cuanto se cargue el vídeo.

Imagen del vídeo Para mostrar una imagen antes de que se cargue el vídeo y cuando mismo haya terminado, se utiliza el atributo póster asignándole con valor la ruta a la imagen.

ejemploV_03.html

se puede tomar una imagen del mismo vídeo y pasarlo a imagenes fijas, o desde otro sitio o fotografia

"images1/mariposas.png" esta imagen se toma del mismo vídeo o desde otro sitio y es el "poster" de inicio del vídeo, o presentación inicial del vídeo, en este caso lo obtuve de forma independiente.

Evidencia: Tomen una fracción de un vídeo y agreguen controles como en el ejemplo anterior, y agregan un "poster" que uds. les agrade y mencionan que es la evidencia_14_unidad_4.png

Controles de vídeo personalizados

Como hemos visto, cada uno de los navegadores mostrará diferente tipo de estética para los controles del vídeo. A tal punto que dependiendo del navegador con el que se vea, la estética puede resultar totalmente distinta y, en el peor de los casos, desentonar con la estética que rodea al vídeo.
Ya sea por una cuestión estética o simple orgullo de programador, podremos personalizar los controles de vídeo y darles un estilo personalizado. Esto se logra combinando CSS para la estética de los controles y JavaScript para darles funcionalidad.
Valiéndonos de métodos y eventos definidos para la etiqueta <vídeo>. Podremos controlar y escuchar sus eventos.
La intención es darle la posibilidad al usuario de controlar el vídeo y mantener un diseño igual en los diferentes navegadores

Para ello contamos con 4 eventos:

• VÍdeo: es el vídeo propiamente dicho en sus diferentes versiones para cada uno de los navegadores.

• Estructura HTML: son los botones de reproducir/pausar, volumen duración del vÍdeo, tiempo de reproducción.

• Estilos de los controles: es la estética con la que se verán los controles.

• Código JavaScript: básicamente, serán escuchas tanto del Vídeo como de los controles. Los escuchas de los controles afectarán a vídeo. Y los del vídeo harán modificaciones en los controles. Por ejemplo, al reproducirse el vídeo se mostrará el botón para pausarlo y viceversa. Al hacer clic en el botón Pausa, el vídeo se detendrá.
  

Estructura HTML (vídeo y controles visuales)

Dispondremos, entonces, la estructura del HTML respecto al vídeo y sus controles. En nuestro ejemplo, utilizaremos los siguientes controles:

Reproducción y pausa: habrá una imagen para reproducir y otro para pausar. Si el vídeo está reproduciendo, se mostrará la imagen de pausa y si está detenido el de reproducir, mediante JavaScript.

Barra de progreso: mostrará en qué momento en el tiempo si encuentra el vídeo. Además, esta barra será interactiva y permitir:
ir a un momento determinado del vídeo al hacerle clic o tap.

Texto con tiempo actual y duración: mostrará en qué momento se encuentra el vídeo y su duración.

Silencio (activado/desactivado): será un botón que cambiará si la imagen de acuerdo al rango del volumen en el que se configure el video. En caso de hacerle clic o tap, alternará entre los modos de silencio activado y desactivado. También, estos se harán mediante JavaScript.

Entonces, el código que ya teníamos le agregamos la estructura de HTML que luego estilizaremos con CSS. Algunas imágenes y textos serán alterados por JS de acuerdo al estado del video y, a su vez, desde los controles que inmediatamente desplegaremos, el usuario podrá controlar el vídeo.

ejemploV_04.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="description" content="Ejemplo" de=" Formularios">
    <meta name="keywords" content="CECATI" no.="89",ciudad=" Celaya, Guanajuato=">
    <title>Conociendo Video en WEB controles personalizados</title>
  <link rel="stylesheet" type="text/css" href="video.css">
</head>

<body>
<video id="videoContenido" width="580" height="480" poster="images1/mariposas.png">

<source src="videos/reserva_mariposas.mp4" type="video/mp4">

<source src="videos/reserva_mariposas.webm" type ="video/webm">

<source src="videos/reserva_mariposas.ogv" type ="video/ogg">

<p>Este navegador no soporta video HTML5</p>
</video>
<div id="controles">

<div id="controlesDeVideos">

<button id="botonPlayPausa"></button>

<div id='barraVideo' class='barra'>
<div id='sliderVideo' class='slider'></div>
</div>

<div id="tiempoActual">00:00</div>
<div id="duracion">/00:00</div>
<button id="botonVolumen" ></button>
<div id='barraVolumen' class='barra'>
<div id='sliderVolumen' class='slider'></div>

   </div>

  </div>
</div>


<script src="manejoDeVideo.js" ></script>

</body>
</html>

estamos en el diseño de HTML, aun nos falta CSS y JS, para ello consideremos esto:

Las imágenes de los botones: reproducir/pausar y volumen los manejaremos mediante CSS. A continuación, veremos cómo nos quedaría el HTML. Utilizaremos palabras en español para diferenciar fácilmente los distintos elementos.

En nuestro CSS, hay dos atributos que permiten ubicar los controles, uno al lado del otro y son:

float:left;: este atributo provoca que un elemento “flote” dentro del elemento contenedor. En este caso, éste queda fuera del flujo de los otros elementos y se va a colocar lo más arriba que queda a la izquierda inmediatamente después de otro elemento que esté “flotando” dentro del contenedor. Si no hay otros elementos flotantes, se ubicará en el extremo superior izquierdo del contenedor. El “hueco” que dejará en la estructura será llenado por el siguiente elemento.

position: relative : este atributo permite modificar la posición de un elemento desde donde se encuentra. En el caso de nuestro ejemplo, todos los controles “flotan” por lo cual se ubicarán a la izquierda del elemento anterior y a partir de esa posición se aplicarán los ajustes de left, rigth, top y bottom.

En nuestro ejemplo, usamos solamente: left y top

A continuación, el código del archivo video.css del ejemplo

video.css

Notar que hemos puesto la llamada al script antes de </body> de esta manera los elementos de la página se cargará más rápido y el código no interrumpirá la carga de los elementos visuales.

Y ahora le daremos vida a nuestro reproductor de video personalizado.
Tenemos la estructura y tenemos el estilo. Ahora debemos conectar el video con los controles. El punto de unión, es decir, la bisagra es el código JavaScript.
Algo muy importante para tener en cuenta es que el video no siempre será controlado desde nuestros controles. También es posible que el usuario lo manipule mediante el teclado o también en algunos navegadores es posible hacer aparecer los controles del navegador aunque no hayamos agregado el atributo controls.

En lo que refiere a la lógica de control, tendremos varios aspectos a cubrir:

Suscripción a los eventos de video: para mantener consistente lo que se muestra en el video con las acciones del usiario; ya sea por manipulación del video desde tus controles, los controles del navegador o mediante el teclado.

Suscripción a los eventos de los controles: estas suscripciones darán al usuario la posibilidad de controlar el video con tus controles personalizados.
Barra de progreso personalizada: si bien existe el elemento input del tipo range que despliega una barra con deslizador. El inconveniente es que en cada navegador tiene un estilo distinto Haciendo el nuestro lleva un poco más de código, pero nos aseguramos que se vea igual en todos los navegadores. Por otro lado, podríamos utilizar otro tipo de control por ejemplo uno circular o de cualquier otro tipo sin necesidad de quedar atados . El que viene por defecto en el navegador.

Para el caso de este ejemplo el código quedará en un archivo que se llamará: manejoDeVideo.js

Referencia a los elementos
Lo primero que haremos es definir las variables que apuntarán a los elementos claves de nuestro reproductor, como vemos a continuación, con la función que se autoejecutará y mantendrá un scope independiente de windows.

(function() {
this.videoContenido = document.getElementByld('videoContenido');
this.botonPlayPausa = document.getElementByld('botonPlayPausa');
this.barraVideo = document.getElementByld ('barraVideo');
this.sliderVideo = document.getElementByld('sliderVideo');
this.tiempoActual = document.getElementByld('tiempoActual');
this.duración = document.getElementByld('duración');
this.botonVolumen = document.getElementByld('botonVolumen');
this.barraVolumen = document .getElementByld('barraVolumen') ;
this.sliderVolumen = document.getElementByld('sliderVolumen');
})();

Por una cuestión de claridad, veremos las diferentes funciones por separado. Pero debemos tener en cuenta que todo este código irá dentro de esta función que se autoinvoca.

Manejo del botón Play/Pausa

Tendremos 3 funciones que manejarán el estado del botón y control de reproducción del video.

setPlayPauseButton: si el video se está reproduciendo, se mostrará la imagen de pausa. En caso de que el video no se esté reproduciendo se mostrará la imagen correspondiente a reproducir.

onPlayPauseClick: cada vez que se haga clic o tap en el botón, si el vídeo no se está reproduciendo se reproducirá y, en caso de estar reproduciendo, se pausará.

onPlayPauseVideo: es un escucha del evento de vídeo que cambiará el estado visual del botón.

Entonces, dentro de nuestra función agregaremos los escuchas correspondientes:

this.videocontenido = document.getElementByld('videoContenido');
videoContenido.onplay = onPlayPauseVideo;
videoContenido.onpause = onPlayPauseVideo;

this.botonPlayPausa = document.getElementByld('botonPlayPausa');
botonPlayPausa.addEventListener("click",onPlayPauseClick) ;

Por una cuestión de espacio y mayor claridad, no estamos utilizando el código que permite manejar eventos en todos los navegadores que hemos visto

Ahora será posible para el usuario controlar el vídeo y el botón reproducir o pausar se adaptará de acuerdo al estado del vídeo ya sea que se maneje por tu botón, teclado o control del navegador.
Y aquí las funciones de las que hablamos al comienzo de la sección:

function setPlayPauseButton() {
if(videoContenido.paused)
{
botonPlayPausa.style.background = 'url(imagen/play.png) 0px 0px no-repeat';
}else{
botonPlayPausa.style.background ='url(imagen/pause.png) 0px 0px no-repeat';
}
}
function onPlayPauseClick() {
if(videoContenido.paused) {
videoContenido.play();
}else{
videoContenido.stop();
}
}
function onPlayPauseVideo()
{
setPlayPauseButton ()
}

Barras de progreso y botón deslizador

Ahora es el turno de la barra de progreso y botón deslizador. Para esto necesitaremos escribir un poco más de código. Crearemos un objeto al crearlo se le pasará una barra interactiva, un botón deslizador y callback. Este callback lo que hará es recibir un número en el rango de 0 y 1 correspondiente a la posición del botón deslizador sobre la barra interactiva.

Este objeto servirá para el manejo de la barra de progreso del vídeo y del control volumen. Eventualmente, se lo puede utilizar para manejar cualquier otro control de este tipo.

Este objeto contendrá las siguientes funciones, aquí veremos el listado con la firma respectiva.

slideBar(bar, slider, callback): es el constructor, recibe la referencia de la barra, el botón deslizador y el callback.
Este objeto se encarga de suscribirse a los eventos de clic a interacción con la barra y el botón deslizador y correspondiente ubicación. Y por supuesto le pasará al callback un número entre 0 y 1 correspondiente a la ubicación del botón sobre la barra.

handleSlide (ratio): esta es la única función pública del objeto. Esta función posicionará el botón deslizador de acuerdo al ratio que se le pase.

onStartDrag (event): este escucha se dispara cuando se comienza a arrastrar el botón.

onDraging (event): se dispara a medida que se arrastra el botón.

onStopDrag(event): se dispara cuando se termina de arrastrar el botón.

El objeto que manejará visualmente la barra de progreso y el botón deslizador es el siguiente:

function slideBar(bar, slider, callback)
{

this.handleSlide = handleRatio;

bar.addEventListener('mousedown', onStartDrag, false);
bar.addEventListener('mouseup', onStopDrag, false);

function onStartDrag(event)
 {
var ratio = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2)) ;
bar.addEventListener('mousemove', onDraging, false);
handleRatio(ratio);
callback(ratio);
}

function onDraging(event)
{
var ratio = ((((event.clientX - bar.offsetLeft ) / bar.offsetWidth) ).toFixed(2) ) ¡
handleRatio(ratio) ;
callback(ratio);
}

function onStopDrag(event)
{
var ratio = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
bar.removeEventListener('mousemove', onDraging, false);
handleRatio(ratio);
callback(ratio);
}

function handleRatio (ratio)
{
ratio = ratio > 1 ? 1 : ratio;
ratio = ratio < 0 ? 0 : ratio;
slider.style.left = (ratio * (bar.offsetwidth-slider.offsetWidth) ) + 'px';
}

}

Manejo y control del tiempo de reproducción

Para la barra de progreso del video, existen dos manejadores de eventos uno correspondiente al clic o tap de la barra de progreso o el arrastre del botón deslizador y otro correspondiente al evento de actualización de tiempo del video. En el primer caso, se adaptará el tiempo actual de video en función de la interacción y en el segundo caso se actualizara:
texto que muestra el tiempo actual y duración y por supuesto la posición del botón deslizador respecto al tiempo actual del video.
Veamos cómo se manejará la interacción del usuario:

this.videoSlideBar = new slideBar(barraVideo, sliderVideo,handleVideoProgress);

El callback handleVideoProgress que se está pasando como tercer parámetro, actualizará el tiempo actual del video i
correspondencia con el clic en la barra (barraVideo) la posición del botón deslizador (sliderVideo). La propiedad duration no siempre estará disponible ya sea porque el video no comenzó a reproducirse o bien porque se trata de un video que se carga en una transmisión flujo continuo. El callback que será llamado cada vez que se interactúe con la barra de progreso y el botón deslizador es el siguiente:

function handleVideoProgress(ratio)
{
if(!isNaN(videoContenido.duration)){
videoContenido.currentTime = ratio * videoContenido.duration;
}
}

Ya sea el clic sobre la barra de progreso como el arrastre del botón deslizador provocarán el cambio del tiempo actual del video.
A su vez, cada vez que el tiempo del video cambia mientras se está reproduciendo, disparará el evento correspondiente. Entonces, agregamos un manejador de evento que actualizará la barra de progreso y el botón deslizador con el tiempo actual del video así como el texto de tiempo actual y duración.

El manejador del evento lo que hará es calcular en base a la duración total del video y el tiempo actual en qué posición debería estar el botón deslizador.

function onTimeUpdate()
{
var ratio;
if(isNaN(videoContenido.duration) ){
ratio = 0;
}else{
ratio = videoContenido. currentTime == 0 ? 0 :videoContenido.currentTime / videoContenido.duration;
}
if(isNaN(videoContenido.duration)){
tiempoActual.innerHTML = "--:--";

duración.innerHTML = "--:--";
ratio = 0;
}else{
tiempoActual.innerHTML = formatTime(videoContenido.currentTime);
duración.innerHTML = "/" + formatTime(videoContenido.duration) ;
}
videoSlideBar.handleSlide(ratio);
}

function formatTime(secs)
{
var hora = Math.floor(secs / 3600);
var min = Math.floor((secs - (hora * 3600))/60);
var sec = Math.floor(secs - (hora * 3600) - (min * 60) );

if( hora == 0)
{
hora = "";
}else{
if (hora < 10) { hora
= "0" + hora; }
hor + ":";
}
if (min < 10) { min = "0" + min; }
min += ":";
if (sec < 10)
{ sec
= "0" + sec; }
return hora + min + sec;
}

Manejador del volumen

El valor del volumen del video está dentro del rango entre 0 y 1.

Para el manejador de volumen, utilizaremos el objeto: slideBar que utilizamos pata la barra de progreso del tiempo del video. En cuanto se haga clic en la barra de volumen o se deslice el botón deslizador de volumen, se alterará el volumen en consecuencia. El valor que recibirá el callback del slider será un valor entre 0  y 1, por lo que se podrá asignar el argumento a la propiedad volume del video directamente.

El callback handleVolume lo único que hará es cambiar el valor del volumen en función del valor recibido.

También, agregaremos un escucha al cambio de volumen del vídeo para actualizar la posición del botón deslizador de volumen y, además, cambiar la imagen del botón de volumen.

Para activar o desactivar el silencio del video, agregaremos un control de escucha al botón de volumen. Cuando sea cliqueado, si el volumen no esta en 0, lo pondrá en 0 y si fuera 0, lo pondrá en el último valor de volumen.

A continuación, veremos cómo ha quedado el código completo del JS ejemplo con todos los archivos necesarios. El archivo que veremos a  continuación manejoDeVideo.js

Este ejemplo es muy elaborado el resultado se ve en la imagen inferior si deseas probar esto te dejo los archivos comprimidos para que evalues este ejercicio pero no es necesario que envies evidencia de este, solo es de muestra, no todos los navegadores responden bien a este código, pero veras como se puede realizar, aqui estan los archivos necesarios, y las imagenes y videos puedes cambiarlos, recurda que al final estan los archivos de imagen y videos usados en este ejemplo, archivos de personalizacion de controles.

Manejo de audio

El manejo de la etiqueta <audio> es prácticamente lo mismo que el de etiqueta de video. Como vimos al principio, en ambos casos tanto en video como en audio, debemos utilizar ciertos formatos para que sean soportados por la mayoría de los navegadores.

Para el caso de la etiqueta <audio>, los formatos soportados son: audio/mp3 y audio/ogg. El formato .mp3 es el más usual, por general, se parte desde este formato y se lo transforma en un archivo.ogg.

Podremos encontrar muchos conversores on-line y gratuitos desde el cual hacer la conversión. El sitio que utilicé para este ejemplo es siguiente: http://online-audio-converter.com/es/ . De todas forma consultando a San Google podremos encontrar el que el mejor se adapte a lo que necesitamos.

Veamos un ejemplo sencillo con tema de Iron Maiden:

Luego todo lo que hemos visto con el tag de <video>, poder aplicarlo con el tag de <audio>.

Las imágenes pueden ser otras, puedes descargarlas desde Google Images, pero deberías de modificarlas para escalar estas, a un tamaño de 25 x 25 pixeles para que sean observadas.

Descarga images.zip

Descarga videos.zip