Reproductor audio y vídeo HTML5 y JavaScript

GrAnRA

Buenas! necesito hacer un reproductor de video y de audio muy basico, pero personalizado.

Lo que me pide exactamente es esto:

En la web construida en la sesión 1, dentro del artículo audio, incluir un
reproductor de audio html5 con las siguientes características:

- Cada una de las pistas (al menos 3) estarán disponible en formato ogg/mp3
- Para los navegadores que no tengan soporte Audio Html 5, se lo indicaremos
e incluiremos enlaces para la descarga de los archivos.
- Incluiremos nuestros propios controles para:
o Pausar/reproducir audio.
o Controlar volumen (subir / bajar / mute)
o Una barra de progreso
- Dispondremos de una lista de reproducción con:
o Listado de las pistas de audio disponibles, podremos cambiar de pista
pulsando sobre el nombre de la pista.
o Botones para cambiar de pista avanzando o retrocediendo una pista en
la lista de reproducción.
- Finalmente ocultar controles por defecto y dar estilo a los nuevos controles
personalizados.

Lo que he conseguido es hacer uno copiado y pegado en el que se incluye una lista de reproduccion etc.

El de vídeo por lo que tengo entendido es muy similar. El aspecto es lo de menos. Si alguien me puede decir alguna pagina donde pueda ver algun ejemplo o algo os los agradecería. Ya he buscado varios pero no consigo hacerlo.
Gracias por todo!

charl1

Desconozco el alcance de tu nivel de javascript, de primeras sin saber que sabes, te diría que miraras dos opciones:

Opc 1: Coger valores de un fichero para poder tener n canciones sin ensuciar el código.
Opc 2: Investigar como coger el valor de un atributo al clicar en la lista y cambiar el source del reproductor y darle al play.

He repetido más o menos el enunciado que has puesto pero desglosando un poco más, es decir, lo que buscas que es tener una lista ya sea obtenida por el fichero o estática en el código y la clicar en cualquier opción (nombre de la lista), coger un atributo donde podrías poner la url del fichero y aplicarla al reproductor.

Es bastante sencillo lo que te piden para una persona que sabe unos mínimos, te animo a que investigues un poco con google o stackoverflow.

1
JuAn4k4

Yo he probado jPlayer, y puedes hacer tu theme personalizado (hay algunos por ahi) y funciona bastante bien.

http://jplayer.org/

Tienes plantillas hasta en themeforest : http://themeforest.net/tags/jplayer

Tunnecino

Yo en los últimos tiempos he estado tirando directamente del tag <video> en HTML5, http://caniuse.com/#search=video y si no te importa que la gente que usa versiones IE antiguas lo vean mal (si es para un negocio, generalmente las nuevas versiones de IE las tiene gente con sistemas mas modernos, por lo tanto podría decirse que al enfocar tu desarrollo a versiones recientes, estás centrando tu atención en usuarios que por lo general son clientes potenciales).

Y después de esta opinión personal, con el tag <video> y JS puedes hacer casi lo que quieras.

Usuarios habituales

  • Tunnecino
  • JuAn4k4
  • charl1
  • GrAnRA