Video player with RANDOM button

Asked

Viewed 57 times

1

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&oacute;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 Player for RANDOM or SHUFFLE, someone can help me?

javascript

1 answer

1

You already have the video array:

var lvi = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10" ];

Just mix them with a function of shuffle, as the below:

function shuffle(array) {
  var atual = array.length, temp, aleatorio;

  while (0 !== atual) {

    aleatorio = Math.floor(Math.random() * atual);
    atual -= 1;

    // Swap dos elementos
    temp = array[atual];
    array[atual] = array[aleatorio];
    array[aleatorio] = temp;
  }

  return array;
}

And the button will call this function shuffle(), assign the current video to the first element and invoke play.

Here’s an example of a random music player doing the same thing, only at the end of the playback:

http://jsfiddle.net/vkMqR/1404/

  • I added the Function shuffle(array) right after the array of videos as instructed and it didn’t work. I did another test; I added the Function shuffle(array) at the end of the script and it didn’t work either. Another thing, you quoted: "And the button will call this shuffle() function, assign the current video to the first element and invoke play." how to add this button? I think that’s what’s missing?

  • I visited the indicated page and found that there was a missing instruction: shuffle(musicarr); in my case shuffle(Lvi); and added the Function shuffle(array) at the end of the script. It worked perfectly! Thank you very much Rafael B.

  • That’s great, @b3k. If you can then accept the question and vote for it as a positive, I’d appreciate it.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.