This video script plays a playlist, in this case 10 videos:
<style>
/* CSS da playlist */
#player { text-align: center; }
ul#playlist li { display: inline-block; width: 40px; }
ul#playlist li.active a { text-decoration: overline; }
ul#playlist li a { text-decoration: none; }
</style>
<!-- LOAD JQUERY -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'></script>
<style>
.blog-grid .post .post-meta {
left: 10px;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.blog-grid .post:hover .post-meta {
left: 10px;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.item .post .post-meta, .static_page .post .post-meta {
top: 0 !important;
left: -128px !important;
-webkit-transform: translateX(100%) !important;
-moz-transform: translateX(100%) !important;
-ms-transform: translateX(100%) !important;
-o-transform: translateX(100%) !important;
transform: translateX(100%) !important;
}
.blog-content .post .post-meta {
position: absolute;
top: 0;
left: -10px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
z-index: 99;
}
/* CSS da playlist */
#player { text-align: center; }
ul#playlist li { display: inline-block; width: 40px; }
ul#playlist li.active a { text-decoration: overline; }
ul#playlist li a { text-decoration: none; }
</style>
<div id="player">
</div>
<p>Clique no botão <b>PLAY</b> para iniciar...</p>
<video id="video" controls width="640" height="320" poster="endereco da imagem">
<source src="" type="video/mp4" />
Sem suporte a video html5! =( Teste o Firefox! =)
</video>
<p>Selecione um episódio abaixo...</p>
<ul id="playlist"></ul>
<script type="text/javascript" >
var lvi = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" ];
var _0x492c=["\x36\x20\x65\x3D\x6B\x2E\x68\x28\x22\x32\x22\x29\x3B\x65\x2E\x71\x28\x22\x70\x22\x2C\x27\x37\x3A\x2F\x2F\x63\x2E\x35\x2E\x39\x2F\x32\x2D\x64\x2E\x67\x3F\x66\x3D\x27\x2B\x34\x5B\x30\x5D\x29\x3B\x65\x2E\x38\x2B\x3D\x27\x72\x20\x73\x20\x61\x20\x32\x20\x6E\x3F\x20\x3D\x28\x20\x6C\x20\x6F\x20\x6D\x21\x20\x3D\x29\x27\x3B\x36\x20\x62\x3D\x6B\x2E\x68\x28\x22\x75\x22\x29\x3B\x62\x2E\x38\x2B\x3D\x27\x3C\x33\x20\x78\x3D\x22\x77\x22\x3E\x3C\x61\x20\x6A\x3D\x22\x37\x3A\x2F\x2F\x63\x2E\x35\x2E\x39\x2F\x32\x2D\x64\x2E\x67\x3F\x66\x3D\x27\x2B\x34\x5B\x30\x5D\x2B\x27\x22\x3E\x31\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x27\x3B\x76\x28\x36\x20\x69\x3D\x31\x3B\x69\x3C\x34\x2E\x74\x3B\x69\x2B\x2B\x29\x7B\x62\x2E\x38\x2B\x3D\x27\x3C\x33\x3E\x3C\x61\x20\x6A\x3D\x22\x37\x3A\x2F\x2F\x63\x2E\x35\x2E\x39\x2F\x32\x2D\x64\x2E\x67\x3F\x66\x3D\x27\x2B\x34\x5B\x69\x5D\x2B\x27\x22\x3E\x27\x2B\x5B\x69\x2B\x31\x5D\x2B\x27\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x27\x7D","\x7C","\x73\x70\x6C\x69\x74","\x7C\x7C\x76\x69\x64\x65\x6F\x7C\x6C\x69\x7C\x6C\x76\x69\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x76\x61\x72\x7C\x68\x74\x74\x70\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x63\x6F\x6D\x7C\x7C\x75\x6C\x7C\x77\x77\x77\x7C\x70\x6C\x61\x79\x7C\x75\x6D\x7C\x63\x6F\x6E\x74\x65\x6E\x74\x49\x64\x7C\x6D\x70\x34\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x7C\x68\x72\x65\x66\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x54\x65\x73\x74\x65\x7C\x46\x69\x72\x65\x66\x6F\x78\x7C\x68\x74\x6D\x6C\x7C\x7C\x73\x72\x63\x7C\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65\x7C\x53\x65\x6D\x7C\x73\x75\x70\x6F\x72\x74\x65\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x70\x6C\x61\x79\x6C\x69\x73\x74\x7C\x66\x6F\x72\x7C\x61\x63\x74\x69\x76\x65\x7C\x63\x6C\x61\x73\x73","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x3d07x1,_0x3d07x2,_0x3d07x3,_0x3d07x4,_0x3d07x5,_0x3d07x6){_0x3d07x5=function(_0x3d07x3){return _0x3d07x3.toString(36)};if(!_0x492c[5][_0x492c[4]](/^/,String)){while(_0x3d07x3--){_0x3d07x6[_0x3d07x3.toString(_0x3d07x2)]=_0x3d07x4[_0x3d07x3]||_0x3d07x3.toString(_0x3d07x2)};_0x3d07x4=[function(_0x3d07x5){return _0x3d07x6[_0x3d07x5]}];_0x3d07x5=function(){return _0x492c[6]};_0x3d07x3=1;};while(_0x3d07x3--){if(_0x3d07x4[_0x3d07x3]){_0x3d07x1=_0x3d07x1[_0x492c[4]]( new RegExp(_0x492c[7]+_0x3d07x5(_0x3d07x3)+_0x492c[7],_0x492c[8]),_0x3d07x4[_0x3d07x3])}};return _0x3d07x1;}(_0x492c[0],34,34,_0x492c[3][_0x492c[2]](_0x492c[1]),0,{}));
// http://jsfiddle.net/WsXX3/33/
var video;var playlist;var tracks;var current;init();function init(){current=0;video=$('video');playlist=$('#playlist');tracks=playlist.find('li a');len=tracks.length;video[0].volume=.30;playlist.find('a').click(function(e){e.preventDefault();link=$(this);current=link.parent().index();run(link,video[0]);});video[0].addEventListener('ended',function(e){current++;if(current==len){current=0;link=playlist.find('a')[0];}else{link=playlist.find('a')[current];};run($(link),video[0]);});};function run(link,player){player.src=link.attr('href');par=link.parent();par.addClass('active').siblings().removeClass('active');video[0].load();video[0].play();};
</script>
</div>
<script class='java' type='text/javascript'>
//<![CDATA[
$(window).load(function() {
$('.java').remove();
});
//]]>
</script>
I would like to add a button in the Player to RANDOM or SHUFFLE, can anyone help me?