Reproducir video y audio con HTML5 y MediaElement
Gracias a la llegada de HTML5, sus nuevos tags y la mezcla con jQuery podemos conseguir un reproductor de video y de audio totalmente personalizable.
Puedes descargarte de la página oficial el script y ejemplos de utilización de MediaElement.
La característica principal de este script es la gran posibilidad que ofrece de poder editar tanto a nivel de programación como de diseño (CSS).
En este artículo vamos a centrarnos en el reproductor de audio.
Tan solo deberemos incluir en nuestro <head> los scritps y estilos necesarios:
<script src="../build/jquery.js"></script> <script src="../build/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
Y en el <body> pondremos lo siguiente:
<audio id="player2" src="../media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3" controls="controls">
</audio>
<script>
$('audio,video').mediaelementplayer();
</script>
Con tan solo este código dispondremos de un reproductor de audio bastante atractivo y sencillo y además muy fácil de personalizar mediante estilos CSS.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “Reproducir video y audio con HTML5 y MediaElement”
Deja una respuesta
4 artículos que te podrían interesar
Buenos días, ya cargué los códigos en el header.tpl de mi tienda prestashop y efectivamente me aparece el reproductor en la página, pero como hago para cargar los mp3? En el momento le doy «play» y no pasa nada. Tengo un audio en mi ordenador, ¿cuál es el proceso para que ese audio se reproduzca al darle «play»? De antemano gracias…!
Hola buenas tardes,
El archivo mp3 a reproducir debe estar subido al servidor y en el atributo src=»» del elemento audio debes especificar la ruta del archivo mp3 en el servidor.
Saludos