HTML Video playlist to Blogger-By Tutos Javo

Primer codigo: Codigo que va en la plantilla de blogger antes de la etiqueta: ]]></b:skin>

#vplaylist, #vplayer {
width: 90%; /* Ancho de todo el contenedor */
padding: 20px;
margin: 0 auto;
display: block;
text-align: center;
}
#vplayer {
background:#232323; /* Fondo del primer contenedor */
padding: 10px 20px;
}
video {
width:95%; /* Ancho del reproductor */
background: #f1f3f4;
margin:0 auto;
display: inline-block
}
#vplayer:after {
/* Imagen animada */
padding-left: 20px;
}
#vplaylist {
margin: 0 auto 20px auto;
display: block;
background: #23a6b3; /* Fondo del segundo contenedor */
border-top: 1px solid #fff;
text-align: left;
font-size: 14px; /* Estilos de fuente */
font-family: 'Arial', Helvetica, sans-serif;
font-weight: normal;
}
#vplaylist li, #vplaylist ul li {
background-image: none;

list-style-type: none;
padding: 0;
margin: 0;
}
#vplaylist li a {
color: #ccc; /* Color de las canciones */
background: #232323; /* Fondo de las canciones */
padding: 7px 2px;
display: block;
padding-left: 10px;
text-decoration: none;
}
#vplaylist li a:hover{
background: #23a6b3; /* Color de fondo al pasar el cursor */
text-decoration: none;
}
#vplaylist .active a {
color: #fff; /* Color de la canción activa */
font-style: Georgia;
text-decoration: none;
}
#vplaylist .active a:before {
content: "\25B6";
color: #fff; /* Color del icono Play */
font-style: normal;
padding-right: 8px;
}
#vplaylist .active a:hover {
color: #000; /* Color de la canción activa al pasar el cursor */
}





Segundo codigo:
Este codigo tambien va en la plantilla de blogger antes de la equiteta </body>





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'
type='text/javascript'/>
<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('en
ded',function(e){vcurrent++;if(vcurrent>vlen){vcurrent=0;link=vplaylist.find('a')[0]}else{link=vplayli
st.find('a')[vcurrent]}runvideo($(link),video[0])})}function
runvideo(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().r
emoveClass('active');video[0].load();video[0].play()}
//]]>
</script>






Tercer codigo:
Codigo HTML que se usara para colocar en un gadgest o una entrada de tu blog :





<div id="vplayer">
<video controls='' height='224' width='100%' id='video' preload='auto' tabindex='0'
type='video/mp4'>
<source src=" URL PRIMER VIDEO " type="video/mp4"></source>
</video>
</div>
<ul id="vplaylist">
<li class="active"><a href=" URL PRIMER VIDEO "> NOMBRE DEL PRIMER VIDEO</a></li>
<li><a href=" URL SEGUNDO VIDEO "> NOMBRE DEL SEGUNTO VIDEO </a></li>
<li><a href=" URL TERCER VIDEO "> NOMBRE DEL TERCER VIDEO </a></li>
<li><a href=" URL CUARTO VIDEO "> NOMBRE DEL CUARTO VIDEO </a></li>
<li><a href=" URL QUINTO VIDEO "> NOMBRE DEL QUINTO VIDEO </a></li>
</ul>

កូដសម្រាប់ផុស ស្រាប់ កែប្រែ អាយឌី ហ្គូហ្គលដ្រាយ

<div id="vplayer">
<video controls='' height='290' width='100%' id='video' preload='auto' tabindex='0' type='video/mp4'>
<source src=" https://drive.google.com/uc?export=download&id=1kZZnLgQFvfgSJu6FMACPdA5daopTqWy5 " type="video/mp4"></source>
</video>
</div>
<ul id="vplaylist">
<li class="active"><a href=" https://drive.google.com/uc?export=download&id=1kZZnLgQFvfgSJu6FMACPdA5daopTqWy5 "> 001-Para Blogge_Tutos Javo</a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1UCNqx15T0RPtRlEcj52EwQHmeNn4DUol "> 002-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1QZQeog7KXvqFWD0q8yIKXkA9herqjX7Z "> 003-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1Mbonaf_E-q8VQ8SJXOkW1j2Xc4Ps99t8 "> 004-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1iWCiS7E_ON4Wo27pbQeuJEsG4ptU3DjL "> 005-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1_CUh3HgheB5r5e3wD5SBq9XT0CCWoyTx "> 006-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1ruZPX5d1d2PY--jJ9rAdAHPqbZpqx7Lt "> 007-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1ruZPX5d1d2PY--jJ9rAdAHPqbZpqx7Lt "> 008-Para Blogger_Tutos Javo </a></li>
<li><a href=" https://drive.google.com/uc?export=download&id=1bIhVmxhfsPZmtz4pRgUYImShsL2T0ohT "> 009-Para Blogger_Tutos Javo </a></li>  
</ul>

/////////////////////////////////////////////////////////////////////////////////////////

Codigo Adicional:

Linea que puedes agregar dependiendo del numero de canciones Antes de la etiqueta de

cierre: </ul>

/////////////////////////////////////////////////////////////////////////////////////////

<li><a href=" URL OTRO VIDEO"> NOMBRE DE OTRO VIDEO</a></li>

//////////////////////////////////////////////////////////////////////////////////////////////////////

Si agregas varios videos y no deseas que se ocupe mucho espacion puedes agregar una barra

de despazamiento

solo busca esta linea de codigo en los estilos del primer paso: #vplaylist {

justo de bajo de esa linea coloca este codigo:

height: 125px; /* alto del todo el contenedor */

overflow: auto;

Preview