![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5lIfEugzDvWaa9ZydUiDCFlLMtH2qzRQwej9zYlZEFWkqt5y1_k2gI88hKmbuEpHlAhIiV16h-yu2SE6PPjW-V_O7DBuggIDpBevCcSXz0Hgv17IMlfMshCjq9dPp7spkJnFNH2Wtb1g/s0/HTML5_player.png)
En la entrada anterior vimos c?mo insertar m?sica en el blog usando la etiqueta <audio>, lo mismo que videos con la etiqueta <video>.
Ahora veremos c?mo crear un peque?o reproductor para reproducir m?ltiples canciones en HTML5, es decir, c?mo crear un playlist con el elemento <audio>
Este es un sencillo reproductor de MP3 que permite incluir m?ltiples canciones con loop de manera que cuando acabe una canci?n pasar? a la siguiente por si sola. El ?nico problema es que s?lo admite MP3 as? que en el navegador Opera no se escuchar?. Con el resto de los navegadores que admitan el elemento <audio> no habr? ning?n problema.
Puedes verlo en funcionamiento aqu? mismo, ya sea que des play al reproductor, o selecciones una canci?n de la lista.
Ahora veremos c?mo crear un peque?o reproductor para reproducir m?ltiples canciones en HTML5, es decir, c?mo crear un playlist con el elemento <audio>
Este es un sencillo reproductor de MP3 que permite incluir m?ltiples canciones con loop de manera que cuando acabe una canci?n pasar? a la siguiente por si sola. El ?nico problema es que s?lo admite MP3 as? que en el navegador Opera no se escuchar?. Con el resto de los navegadores que admitan el elemento <audio> no habr? ning?n problema.
Puedes verlo en funcionamiento aqu? mismo, ya sea que des play al reproductor, o selecciones una canci?n de la lista.
Parece que fuera complejo pero no es as?, de hecho el script que usa es muy corto, pr?cticamente todo es CSS.
Para poner este reproductor de m?ltiples canciones en tu blog entra en Plantilla | Edici?n de HTML y antes de </body> agrega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>Si ya tuvieras jQuery en tu plantilla entonces omite la primera l?nea.
<script>
//<![CDATA[
var audio;var playlist;var tracks;var current;initaudio();function initaudio(){current=0;audio=$('audio');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length-1;audio[0].volume=1;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();runaudio(link,audio[0])});audio[0].addEventListener('ended',function(e){current++;if(current>len){current=0;link=playlist.find('a')[0]}else{link=playlist.find('a')[current]}runaudio($(link),audio[0])})}function runaudio(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');audio[0].load();audio[0].play()}
//]]>
</script>
Luego, ah? mismo en la Edici?n HTML busca la etiqueta ]]></b:skin> y antes de ella pega los estilos:
#playlist, #player {Por ?ltimo, en un gadget HTML/Javascript o en una entrada de tu blog agrega la estructura:
width: 400px; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#player {
/* Imagen de fondo del primer contenedor */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitCTIjwOKK4umn935apAJ_nu2RzmyyFqXDaRgn6XDeYHaHLh4AdV-HPkP1_okPb65wjzomXWvKd1WfxNytLOmhcmwwVbfjBHxUpWwnz0gJmxyGxkXdYXiweRD_HnePfv7zmjfNA6LODXc/s300/bg.png);
padding: 10px 20px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
audio {
width:300px; /* Ancho del reproductor */
margin:0 auto;
display: inline-block
}
#player:after {
/* Imagen animada */
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyh6QYku4EUea8yZ7YWn6HTk3QKVYlmikOzniQunGGzy5KNwvLlJDNrsTwNOx-2oDVKZxLXDA96HnlUG0EIM8XbziDr96cbzAJ0TRTSiWlUgqB0ydcEqgfPauJHUI2Cn4xraDRbq2Vcf8/s75/equalizador.gif);
padding-left: 10px;
}
#playlist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Fondo del segundo contenedor */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px; /* Estilos de fuente */
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#playlist li, #playlist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#playlist li a {
color: #CCC; /* Color de las canciones */
background: #222; /* Fondo de las canciones */
padding: 7px 5px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#playlist li a:hover{
background: #9F111B; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#playlist .active a {
color: #B11623; /* Color de la canci?n activa */
font-style: italic;
text-decoration: none;
}
#playlist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#playlist .active a:hover {
color: #222; /* Color de la canci?n activa al pasar el cursor */
}
<div id='player'>
<audio controls='' id='audio' preload='auto' tabindex='0' type='audio/mpeg'>
<source src='URL de la primera canci?n' type='audio/mp3'/>
Hola, tu navegador no est? actualizado y no puede mostrar este contenido.
</audio>
</div>
<ul id='playlist'>
<li class='active'><a href='URL de la primera canci?n'>Nombre de la primera canci?n</a></li>
<li><a href='URL de la segunda canci?n'>Nombre de la segunda canci?n</a></li>
<li><a href='URL de la tercera canci?n'>Nombre de la tercera canci?n</a></li>
</ul>
Ah? deber?s poner las URLs de tus canciones donde se se?ala en color rojo. Nota que la URL de la primera canci?n se agrega dos veces, una dentro del reproductor y otra dentro de la lista de reproducci?n. Todas las URLs de tus canciones deber?n ser en formato MP3.
En color azul agrega los nombres de las canciones.
Si quisieras personalizarlo puedes hacerlo siguiendo las anotaciones que est? en color verde, ah? ver?s d?nde se cambian los tama?os, colores, fondos, etc.
La imagen del ecualizador es un GIF animado, puedes eliminarlo si crees que es muy llamativo, o puedes sustituirlo por el logotipo de tu blog o cualquier otra imagen.
Para a?adir m?s canciones s?lo agrega antes del </ul> una l?nea como esta por cada canci?n extra que quieras a?adir al reproductor:
Y si quisieras crear un reproductor de videos usando el elemento <video> igual en HTML5 entonces a?adir?as este c?digo antes de </body>
En color azul agrega los nombres de las canciones.
Si quisieras personalizarlo puedes hacerlo siguiendo las anotaciones que est? en color verde, ah? ver?s d?nde se cambian los tama?os, colores, fondos, etc.
La imagen del ecualizador es un GIF animado, puedes eliminarlo si crees que es muy llamativo, o puedes sustituirlo por el logotipo de tu blog o cualquier otra imagen.
Para a?adir m?s canciones s?lo agrega antes del </ul> una l?nea como esta por cada canci?n extra que quieras a?adir al reproductor:
<li><a href='URL de la otra canci?n'>Nombre de la otra canci?n</a></li>
Y si quisieras crear un reproductor de videos usando el elemento <video> igual en HTML5 entonces a?adir?as este c?digo antes de </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>As? mismo omite la primera l?nea si es que ya tienes jQuery en tu plantilla.
<script>
//<![CDATA[
var video;var vplaylist;var vtracks;var vcurrent;initvideo();function initvideo(){vcurrent=0;video=$('video');vplaylist=$('#vplaylist');vtracks=vplaylist.find('li a');vlen=vtracks.length-1;video[0].volume=1;vplaylist.find('a').click(function(e){e.preventDefault();link=$(this);vcurrent=link.parent().index();runvideo(link,video[0])});video[0].addEventListener('ended',function(e){vcurrent++;if(vcurrent>vlen){vcurrent=0;link=vplaylist.find('a')[0]}else{link=vplaylist.find('a')[vcurrent]}runvideo($(link),video[0])})}function runvideo(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');video[0].load();video[0].play()}
//]]>
</script>
Luego, antes de ]]></b:skin> se agregan los estilos:
#vplaylist, #vplayer {Y por ?ltimo en tu gadget o entrada del blog agrega esto:
width: 400px; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#vplayer {
padding: 10px 20px;
background: #000; /* Color de fondo primer del contenedor */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
video {
width:400px; /* Ancho del reproductor */
padding-top: 10px;
margin:0 auto;
display: inline-block
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #424242; /* Color de fondo del segundo contenedor */
border-top: 5px solid #9F111B;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-align: left;
font-size: 12px;
font-family: 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;
list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a:hover{
background: #9F111B; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#vplaylist .active a {
color: #B11623; /* Color de la canci?n activa */
font-style: italic;
text-decoration: none;
}
#vplaylist .active a:before {
content: "\25B6";
color: #CCC;
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #222; /* Color de la canci?n activa al pasar el cursor */
}
<div id='vplayer'>
<video controls='' height='224' width='400' id='video' preload='auto' tabindex='0' type='video/mp4'>
<source src='URL del primer video' type='video/mp4'/>
Hola, tu navegador no est? actualizado y no puede mostrar este contenido.
</video>
</div>
<ul id='vplaylist'>
<li class='active'><a href='URL del primer video'>Nombre del primer video</a></li>
<li><a href='URL del segundo video'>Nombre del segundo video</a></li>
<li><a href='URL del tercer video'>Nombre del tercer video</a></li>
</ul>
Ah? tambi�n deber?s cambiar las URLs de los videos en color rojo pero esta vez los archivos ser?n en formato MP4. De igual forma, la URL del primer video va dos veces.
Los nombres de los videos se cambian en la parte de color azul. En negrita ver?s d?nde se cambia el tama?o del reproductor.
Para a?adir m?s videos deber?s tambi�n agregar antes del </ul> una l?nea como esta:
El resultado ser? este:
Los nombres de los videos se cambian en la parte de color azul. En negrita ver?s d?nde se cambia el tama?o del reproductor.
Para a?adir m?s videos deber?s tambi�n agregar antes del </ul> una l?nea como esta:
<li><a href='URL del otro video'>Nombre del otro video</a></li>
El resultado ser? este:
De esta manera podr?s tener un reproductor de audio o video con playlist en HTML5. El ?nico problema ser? el navegador Opera, pero el resto de los navegadores modernos no tendr?n problema.
V?a | Last Rose
No comments:
Post a Comment