2017-02-15 4 views
0

Garry 's Mod 서버용 음악이있는 사용자 정의 로딩 화면을 설정하려고합니다. 나는 정말로 큰 문제가있다. YouTube 링크를 입력 할 때마다 화면 상단 여백에 약 16 픽셀이 추가되어 큰 공백이 표시됩니다. 유튜브 내장 코드는 0x0 px로 설정되어 있으므로이 코드를 찾아 낼 수 없으며, 코드를 보면서 몇 시간을 보냈습니다 (대부분은 다른 사용자가 오픈 소스로 작성한 것입니다). , 나는 아무것도 찾을 수 없다. 도와주세요! 자동 재생시 동영상의 기본 볼륨을 제어하는 ​​방법을 아는 사람이 있는지 물어보고 싶습니다. 너무 큽니다. 여기 http://lawsofdestruction.nn.pe.loading.lawsofdestruction.nn.pe/LoadingScreen/내 게임 서버의 로딩 화면을 설정하려고합니다.

그리고 코드 :

<!DOCTYPE html> 
    <!--  
    AUTHOR: Xonos 
    STEAM NAME: frag51richardo 
    I hope you like it! :) 
    --> 
<!--[if lt IE 7 ]><html class="ie ie6" lang="en" class="no-js"> <![endif]--> 
<!--[if IE 7 ]><html class="ie ie7" lang="en" class="no-js"> <![endif]--> 
<!--[if IE 8 ]><html class="ie ie8" lang="en" class="no-js"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <title>Loading</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta name="description" content="Parallax HTML One-Page Template for Agency and Personal"> 
    <meta name="author" content="The Develovers"> 

    <!-- Styles 
     font-family: 'Lobster', cursive; 
     font-family: 'Pacifico', cursive; 
     font-family: 'Kaushan Script', cursive; 
     font-family: 'PT Sans', sans-serif; 
    --> 
    <link href="assets/css/bootstrap.css" rel="stylesheet"> 
    <link href='http://fonts.googleapis.com/css?family=Lobster|Pacifico|Kaushan+Script|PT+Sans' rel='stylesheet' type='text/css'> 
    <!--<link href="assets/css/main.css" rel="stylesheet">--> 
    <link href="assets/css/glyphicons.css" rel="stylesheet"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <link href="assets/css/animate.css" rel="stylesheet"> 
    <link href="assets/css/global-style.css" rel="stylesheet"> 

    <!-- JAVASCRIPT --> 
    <script src="assets/js/jquery-2.1.0.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
    <style> 
     td { 
      padding:5px!important; 
      color:#FFF; 
     } 
     .no-padding { 
      padding:0px!important; 
     } 
     .no-margin { 
      margin:0px!important; 
     } 
     .workshopItemPreviewImage { 
      max-width:100%; 
      text-align: right; 
      border:2px solid #FFF; 
     } 
     .workshopItemTitle { 
      color:#FFF!important; 
      font-size:15pt!important; 
      text-align:left; 
      font-family: 'Kaushan Script', cursive; 
      margin-bottom:0px!important; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .workshopItemShortDesc { 
      display:none; 
     } 
     .fileRating { 
      display:none; 
     } 
     .workshopItemAuthor { 
      padding-left:10px!important; 
      color:#fff!important; 
     } 
     .workshopItemAuthorName { 
      color:#fff!important; 
     } 
     .workshopItemAuthorName a { 
      background-color:#fff!important; 
      border-radius:5px!important; 
      padding-left:3px!important; 
      padding-right:3px!important; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .workshopItemAuthor, workshopItemAuthorName, workshopItemAuthorName a { 
      font-size:10pt!important; 
      text-align:left; 
      font-family: 'Lobster', cursive; 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .circular img { 
      width: 100px; 
      height: 50px; 
      border-radius: 75px; 
      -webkit-border-radius: 75px; 
      -moz-border-radius: 75px; 
      /*background: url(http://link-to-your/image.jpg) no-repeat;*/ 
     } 
     .text-white { 
      color:#FFF; 
     } 
     .hdr, .hdr span { 
      font-family: 'Lobster', cursive!important; 
      font-size: 22pt; 
     } 
     .hdr2, .hdr2 span { 
      font-family: 'Kaushan Script', cursive; 
      font-size: 18pt!important; 
     } 
     .hdl { 
      font-family: 'Pacifico', cursive; 
      font-size: 16pt!important; 
     } 
     .reg tr td { 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .text-left { 
      text-align: left; 
     } 
     .txt-shadow, .txt-shadow span, .txt-shadow i, .txt-shadow strong, .txt-shadow p { 
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1); 
     } 
     .infobox { 
      background: rgba(144,144,144,0.4); /* 40% opaque red */ 
      -webkit-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      -moz-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      box-shadow:   inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
     } 

     .margintop { 
      margin-top: 24px; 
     } 

     .loadbarfx { 
      -webkit-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      -moz-box-shadow: inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
      box-shadow:   inset 0px 1px 2px 3px rgba(50, 50, 50, 0.6); 
     } 
    </style> 
</head> 
<body id="top" class="no-margin no-padding margintop" > 
    <object style="height: 0px; width:0px;"> 
     <embed src="http://www.youtube.com/v/0O-QKo2SIuU?version=3&autoplay=1&loop=1" type="application/x-shockwave-flash" allowScriptAccess="always" width="0" height="0"> 
    </object> 
<div style="position: fixed; z-index: -99; width: 100%; height: 100%"> 
    <?php//$videolink = '0O-QKo2SIuU&t'; ?> 
    <!--<iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/<?php //echo $videolink; ?>?autoplay=1&controls=0&loop=1&playlist=<?php //echo $videolink; ?>"></iframe>--> 
    <iframe frameborder="0" height="100%" width="100%" src="./assets/wallpapers/module.wallpapers.php"></iframe> 
</div> 
<div class="col-xs-12" style="position:absolute;top:5px;left:0;position:absolute;overflow:hidden!important;"> 
    <div class="col-xs-12 text-center"> 
     <img src="logo.png" style="max-width:30%;"/></br> 
    </div> 
    <div class="col-xs-4 infobox"> 
     <table style="width:100%;" class="reg"> 
      <tr><td colspan=2 class="text-center hdr"><i class="fa fa-legal" style="color:#D31E1B;"></i> How to get Banned<td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-bed"></i></td><td>Prop Pushing & Spamming</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-tachometer"></i></td><td>Committing Douche Baggery</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-university"></i></td><td>Bothering Players</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-microphone-slash"></i></td><td>Mic Spamming</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-heartbeat"></i></td><td>Annoying or Lag Inducing Builds</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-frown-o"></i></td><td>Any form of Abuse</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-meh-o"></i></td><td>Lacking of Common Sense</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-chain-broken"></i></td><td>Crashing Server on Purpose</td></tr> 
      <tr><td colspan=2 class="text-white text-center hdr"><i class="fa fa-check-circle" style="color:#24AA22;"></i> Acceptable<td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-bullseye"></i></td><td>PVP</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-mars-double"></i></td><td>Adult Content</td></tr> 
      <tr><td colspan=2 class="text-white text-center hdr"><i class="fa fa-thumbs-o-up" style="color:#225FAA;"></i> Encouraged<td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-cogs"></i></td><td>Wiremod/ACF Builds</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-code"></i></td><td>Impressive & Original E2</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-bug"></i></td><td>Assistance in Finding Addon Bugs</td></tr> 
      <tr><td class="text-white text-center"><i class="fa fa-question-circle"></i></td><td>Teaching Wiremod & Expression 2</td></tr> 
     </table> 
    </div> 
    <div class="col-xs-4"> 
     <div class="col-xs-12"> 
      <table style="width:100%;" class="reg"> 
       <tr><td class="text-white hdr"><i class="fa fa-map-marker" style="color:#D12112!important;"></i> Server Location: <span style="color:#1F6FD1!important;">Houston, TX</span></td></tr> 
       <tr><td class="text-white hdl" colspan=2>Note: Equipping a weapon removes god-mode and enables pvp. You must die to re-gain godmode.</td></tr> 
       <tr> 
        <td class="text-white" colspan=2> 
         <p><strong><u>Updates</u>:</strong></p> 
         <p>Added Sub-Material Tool for new feature added in March Update.</p> 
         <p>SCARS is currently disabled until the author fixes it (it's causing constant server crashes</p> 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
    <div class="col-xs-4"> 
     <div class="col-xs-12 infobox"> 
      <table style="width:100%;" class="reg"> 
       <tr><td colspan=3 class="text-white text-center hdr"><i class="fa fa-cubes text-primary"></i> Server Operators<td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://fc02.deviantart.net/fs70/f/2014/341/1/2/simple_crown_bullet_by_slush_bee-d892v68.png"</td><td>TheIpodk9</td><td>Owner</td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="https://forums.alliedmods.net/images/smilies/bee.png"></img></td><td>Developer</td><td>Cluelesshobo</td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://fc04.deviantart.net/fs71/f/2015/059/b/1/penis_pixel_by_gaaddammit-d8jwkyb.png"></img></td><td>Mortimer McMire</td><td>Munch Blocker</td></tr> 
       <tr><td class="text-white text-center"><img style="width:15px!important;height:15px!important;" src="http://img4.wikia.nocookie.net/__cb20120430113153/clubpenguin/images/b/bb/Moderator_badge_15px.png"></img></td><td><em>❈</em>AG<em>❈</em>Tjroehr</td><td>Super Admin</td></tr> 
      </table> 
      <div class="col-xs-12" style="border-top:1px dotted #CCC;"> 
       <span class="hdr2 text-white txt-shadow"><i class="fa fa-download" style="color:#FFF!important;"></i> <span id="loadingHdr" style="color:#FFF!important;">Validating Workshop Collection ...</span></span> 
       <div class="progress progress-sm progress-striped active"> 
        <div id="progressbar" class="progress-bar progress-bar-striped txt-shadow" style="width: 0%"></div> 
       </div> 
       <span id="subtext1" class="text-white" style="color:#FFF!important;"></span> 
       <span id="subtext2" class="text-white" style="color:#FFF!important;"></span> 
       <span id="subtext3" class="text-white" style="color:#FFF!important;"></span> 
      </div> 
     </div> 
     <div class="col-xs-12 infobox" style="margin-top:10px!important;"> 
      <p class="text-white hdr txt-shadow" style="padding:5px;"><i class="fa fa-user-secret" style="color:#F4CB13!important;"></i> How to become an Admin</p> 
      <span class="text-white txt-shadow" style="padding:5px;">Help Xonos find & resolve bugs in addons that can potentially crash the server. You must be mature and willing to help manage the server with a willingness to help with management in general. Typically there is an age requirement of 17+. <strong>No "<i>Can I haz adminz plzzz</i>"</strong>.</span> 
     </div> 
     <div class="col-xs-12 infobox" style="margin-top:15px!important;"> 
      <p class="text-white hdr txt-shadow" style="padding:15px!important;"><i class="fa fa-flask" style="color:#AD4CF7!important;"></i> About The Server</p> 
      <span class="text-white txt-shadow" style="padding:15px!important;">This server is all about building and it is recommended that you constantly back up your builds. Gmod tends to crash and so do servers with many addons. We tend to focus more on wiremod builds however you are encouraged to build whatever it is that you want. If there are limitations that you need lifted, ask an admin and they can raise these limits for you.</span> 
     </div> 
    </div> 
</div> 
    <script> 
     var totalfilez 
     //Gets initial total files needed. 
     function SetFilesTotal(total) { 
      totalfilez = total; 
      window.totalfiles = total; 
      $('#subtext3').empty().append(total+' files found.'); 
     } 
     //Update Progress Bar 
     function SetFilesNeeded(needed) { 
      window.filesleft = needed; 
      $('#subtext2').empty().append(needed+' files needed.'); 
      if(needed < 1) { 
       var neededz = window.totalfiles; 
      } else { 
       var neededz = needed; 
      } 
      var percent = Math.ceil((((window.totalfiles-neededz)/2)/(window.totalfiles/2))*100); 
      if(!isNan(percent)) { 
       $('#progressbar').css({ "width" : percent+"%"}); 
       $('#progressbar').empty().append(percent+"%"); 
      } 
     } 
     //Update loading header text. 
     function SetStatusChanged(status) { 
      $('#loadingHdr').empty().append(status); 
      /* 
      Retrieving server info... 
      Getting addon info for #------ 
      Found '--' 
      Mounting Addons 
      Workshop Complete 
      Sending client info... 
      */ 
      if(status == 'Retrieving server info...') { 
       $('#progressbar').css({ "width" : "10%"}); 
       $('#progressbar').empty().append("Initializing ..."); 
      } 
      if(status == 'Mounting Addons') { 
       $('#progressbar').css({ "width" : "55%"}); 
       $('#progressbar').empty().append("55%"); 
      } 
      if(status == 'Workshop Complete') { 
       $('#progressbar').css({ "width" : "89%"}); 
       $('#progressbar').empty().append("89%"); 
      } 
      if(status == 'Sending client info...') { 
       $('#progressbar').css({"width" : "100%"}, 15000); 
       $('#progressbar').empty().append('Finalizing ...'); 
      } 
     } 
     //Downloading file event. 
     function DownloadingFile(fileName) { 
      $('#subtext1').empty().append('Obtaining '+fileName+'.</br><b>'+window.filesleft+'</b> out of <b>'+window.totalfiles+'</b>'); 
     } 
    </script> 
    <!-- Server Workshop Collection --> 
    <div class="col-xs-12" style="overflow:hidden;position:absolute!important;bottom:25px;"> 
     <?php 
     include 'simple_html_dom.php'; 
     $url = 'http://steamcommunity.com/sharedfiles/filedetails/?&format=json&id=124102726'; 
     $html = file_get_html($url); 
     foreach($html->find('.collectionItem') as $element) { 
      $workshop .= '<div class="workshopAddon col-xs-4 text-center no-padding" style="display:none;">'; 

      foreach($element->find('.workshopItemPreviewHolder') as $previewImg) { 
       $img = '<div class="col-xs-3 no-padding text-center circular">'.$previewImg->innertext.'</div>'; 
      } 

      foreach($element->find('.workshopItemTitle') as $displayName) { 
       $title = '<p class="workshopItemTitle">'.$displayName->innertext.'</p>'; 
      } 

      foreach($element->find('.workshopItemAuthor') as $displayName) { 
       $author = '<p class="workshopItemAuthor">'.$displayName->innertext.'</p>'; 
      } 


      $workshop .= $img.' 
       <div class="col-xs-9 no-padding"> 
       '.$title.$author.' 
       </div> 
      </div>'; 
     } 
     echo $workshop; 
     ?> 
     <script> 
       var animationIn = 'fadeIn'; 
       var animationOut = 'fadeOut'; 
       var interval = 1500; 
       var pass = 1; 
       $('.workshopAddon').sort(function(){ 
        return (Math.round(Math.random()) - 0.5); 
       }).each(function() { 
        var e = $(this) 
        setTimeout(function() { e.show("fast").addClass('animated '+animationIn); }, interval); 
        setTimeout(function() { e.removeClass(animationIn).addClass(animationOut).delay(2000).hide("fast"); }, (interval+6000)); 
        if(pass <= 2) { 
         interval = interval+1000; 
        } else { 
         pass = 0; 
         interval = interval+9000; 
        } 
        pass = pass+1; 
       }); 

     </script> 
    </div> 
</body> 
</html> 
+0

부트 스트랩은이 유튜브에 자신의 삽입이다가이 형식을 시도 <- 16 : 9 화면 쥐 IO ->

<- 4 :! 3 화면 비율 ->
mlegg

+0

@mlegg 내가 코드에 있음을 넣어 않는 곳 미안 해요, 난, 이것에 약간의 새로운 아직이야? 그리고 도움에 너무 감사드립니다. 혹시 서버를 체크 아웃하려면 Lawsofdestruction.nn.pe에서 포럼을 체크하십시오. – user7566155

답변

0
여기에 우리가 (단지 더 많은 물건을 변경하기 전에 여유 오류를 정렬하려면, 아직 완료되지 않음) 사용하게 될 실제 로딩 화면에 대한 링크입니다 !

사용이

<object width= "0" height="0"><param name="movie" value="http://www.youtube.com/v/https://youtu.be/0O-QKo2SIuU&theme=light&loop=1&autohide=1&playlist=https://youtu.be/0O-QKo2SIuU"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/https://youtu.be/0O-QKo2SIuU&theme=light&loop=1&autohide=1&playlist=https://youtu.be/0O-QKo2SIuU" type="application/x-shockwave-flash" allowfullscreen="true" width="0" height="0" allowscriptaccess="always"></embed></object>