domingo, 6 de noviembre de 2011
jPlayer: reproductor multimedia HTML 5 + Javascript
Leer el poema y oírlo en la entrada de la Antología Poética Multimedia
No es sencillo.
Pero va a dar que hablar.
En la línea de hacer compatible los reproductores multimedia con el lenguaje HTML 5 para garantizar el funcionamiento en todos los sistemas operativos de todos los equipos sean fijos o móviles.
En otro momento hablaremos sobre el reproductor de vídeo.
Ahora lo hacemos con el reproductor de audio.
Si quieres colocarlo en tu blog o web, sigue los pasos que se explican "step by step" en la página web oficial de jPlayer.
Acceso al Primer paso:
http://jplayer.org/latest/quick-start-guide/step-1/
Es necesario indicar que necesitas un alojamiento propio que te permita subir carpetas con contenido a la raíz del sitio.
Son dos carpetas con archivos javascript, css y gráficos.
Carpeta 1: ponle como nombre js. En ella deberás alojar los archivos obtenidos al descargar esto.
- El Jplayer.swf
- El jquery.jplayer.min.js
Carpeta 2: ponle como nombre skin. En ella deberás alojar los archivos obtenidos al descargar y descomprimir esto.
- El jplayer.blue.monday.css
- El jplayer.blue.monday.jpg
- El jplayer.blue.monday.seeking.gif
- El jplayer.blue.monday.video.play.png
- El jPlayer_blue.monday_extd.psd
- El spirites_blue.monday_2011.psd
Y una página web que tiene que tener este código una vez hayas subido los archivos que se mencionan.
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://la_ruta_de_tu_archivo.mp3",
oga: "http://la_ruta_de_tu_archivo.ogg"
});
},
swfPath: "/js",
supplied: "m4a, oga"
});
});
</script>
<title></title>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
</div>
<div class="jp-title">
<ul>
<li>El texto que quieras poner como referencia al audio</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</body>
</html>
Finalmente, para colocar el reproductor en la entrada del blog tienes que hacerlo por medio de un iframe que apunte a la URL de la página web.
<iframe src="http://la_ruta_de_la_pagina_web.html" width="434" height="136" frameborder="0"></iframe>
Suscribirse a:
Enviar comentarios (Atom)
4 comentarios:
Muchas gracias, Funciona bien
Muchas Gracias, Funciona bien.
No me ha funcionado :( , tengo un hostinger con Joomla, en hostinger.es he seguido todos los pasos pero lo único que me aparece es una página con los nombres de los botones no aparece el reproductor gráficamente.
Si me puedes ayudar. un saludo
Para j. v.
Con algo de retraso...
Es que yo creo que jPlayer no funciona en Joomla.
He mirado en Internet y he llegado a esta página en la que parece que alguien había creado un plugin pero lo han dejado de publicar por algún problema de funcionamiento...
http://extensions.joomla.org/extensions/multimedia/video-players-a-gallery/11572
Publicar un comentario