[style]backgroundmusic

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • [style]backgroundmusic

      this is not the best mod, since it is running in an iframe, it has some gliches with the fullscreenmode of the 2moons skin 1.8 fullscreen-mode. this can be fixed if nessesary.
      iframe is a browserwindow in a browserwindow. as the mod is just a play around, its not so important i think.
      here is an example test
      make a test.html in your gamefolder, copy following code in it, and save it. call it with the browser. should show your game with music in the right bottom corner u'll find the player controles. hover it for playlist and controling it

      HTML Source Code

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>2moons</title>
      6. <script type="text/javascript" src="./scripts/base/jquery.js"></script>
      7. </head>
      8. <style>
      9. #playlist,audio{
      10. width:200px;
      11. padding:0px;
      12. margin:0px;
      13. }
      14. .active a{
      15. color:#5DB0E6 !important;
      16. text-decoration:none;
      17. }
      18. #playlist li a{
      19. text-decoration:none;
      20. color:#eeeedd;
      21. background:none;
      22. padding:0px;
      23. padding-right:2px;
      24. display:block;
      25. }
      26. #playlist li a:hover{
      27. background:#333;
      28. }
      29. #moonsframe{
      30. width: 100vw;
      31. height:100vh;
      32. background:#000;
      33. border:0px;
      34. }
      35. #bmusic{
      36. transform: scale(0.4);
      37. position: absolute;
      38. bottom: -120px;
      39. right: -59px;
      40. width: 200px;
      41. }
      42. #bmusic:hover{
      43. transform: scale(1.0);
      44. bottom:0px;
      45. right:20px;
      46. }
      47. </style>
      48. <body style="margin:0px; overflow:hidden;">
      49. <div id="bmusic" >
      50. <audio id="audio" preload="auto" controlsList="nodownload" tabindex="1" controls="controls" type="audio/ogg" >
      51. <source type="audio/ogg" src="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">
      52. Sorry, your browser does not support HTML5 audio.
      53. </audio>
      54. <ul id="playlist" style="background:#000; height:150px; text-align:right; overflow-y:scroll;">
      55. <li ><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
      56. <li class="active"><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
      57. <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
      58. <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>
      59. </ul>
      60. <script>
      61. var audio;
      62. var playlist;
      63. var tracks;
      64. var current;
      65. init();
      66. function init(){
      67. current = 0;
      68. audio = $('audio');
      69. playlist = $('#playlist');
      70. tracks = playlist.find('li a');
      71. len = tracks.length - 1;
      72. audio[0].volume = .30;
      73. audio[0].play();
      74. playlist.find('a').click(function(e){
      75. e.preventDefault();
      76. link = $(this);
      77. current = link.parent().index();
      78. run(link, audio[0]);
      79. });
      80. audio[0].addEventListener('ended',function(e){
      81. current++;
      82. if(current == len){
      83. current = 0;
      84. link = playlist.find('a')[0];
      85. }else{
      86. link = playlist.find('a')[current];
      87. }
      88. run($(link),audio[0]);
      89. });
      90. }
      91. function run(link, player){
      92. player.src = link.attr('href');
      93. par = link.parent();
      94. par.addClass('active').siblings().removeClass('active');
      95. audio[0].load();
      96. audio[0].play();
      97. }
      98. </script>
      99. </div>
      100. <iframe id="moonsframe" src="index.php"></iframe>
      101. </body>
      102. </html>
      Display All
    • this is great.....i have a video background that I made awhile ago for the background environment ....but I couldn't keep it going even when the pages got refreshed or changed.....im goimgvto mess around with this if it's ok but it might work to have a video back round that continues even if the page changes...ill post in a couple of days the results
    • Я правильно понял Вас , Вы хотите добавить на вход при старте видео ? у меня есть такое решение. могу скинуть я его доработал и на весь экран развернул . если внутри игры то можно использовать штатный гугловский код и сделать анимацию планеты в окне если только при входе вот можете на тесте глянуть но он не доделан.. скоро обновлю будет красиво если что с кодом поделюсь скажу куда что вставить. так как чтоб развернуть видео на весь экран надо дописывать ряд пунктов и затирать ограничения в css.. planet-of-free-people.com/index.php глянуть пример оформления можно тут. через неделю оно будет другое полностью сделанное

      в css (в обнове буду код облегчать и делать меньше)
      1. .home-banner-section {

        1. z-index: 3;
        2. display: table;
        3. box-sizing: border-box;
        4. border-top: 10px;
        5. border-top-left-radius: 15em 1em;
        6. border-top-right-radius: 15em 1em;
        7. border-bottom-left-radius: 15em 1em;
        8. border-bottom-right-radius: 15em 1em;
        9. background: url(../../images/homepage/stukov-frame1.jpg) 0 0 no-repeat;
        10. text-align: center;
        11. background-color: transparent;
        12. opacity: 0.5;
        1. .background-video {
          1. position: absolute;
          2. width: 100%;
          3. top: 0;
          4. left: 0;
          5. position: fixed;
          6. min-width: 100%;
          7. min-height: 100%;
          8. width: auto;
          9. height: auto;
          10. z-index: -100;



      .bg-wrapper {

      1. position: relative;
      2. background: url(../../media/images/st.png);
      }

      index tpl
      <div class="home-banner-section">
      <div class="background-video">

      <video class="background-video" autoplay="autoplay" loop="loop">
      <source src="/media/start1.mp4" type="video/mp4"></source>
      </video>
      </div>
      <div class="home-banner">

      ну и ряд парметров в css чтоб все работало было уже затерто иначе видео на весь экран не будет

      The post was edited 2 times, last by loki ().