Javascript 正在尝试为我的游戏服务器设置加载屏幕
我正试图为我的Garry的Mod服务器设置一个定制的音乐加载屏幕。虽然我有个大问题。每当我输入youtube链接时，它会在屏幕的上边缘增加大约16个像素，导致出现一个大的空白。youtube嵌入设置为0x0 px，因此我无法理解其中的任何内容，我今天花了几个小时查看代码（大部分代码是由另一个用户开源的，我只是在修改），但我什么也找不到。请帮忙！我还想问一下，如果有人知道如何控制视频自动播放时的默认音量，我觉得声音有点太大了。下面是我们将使用的实际加载屏幕的链接（尚未完成，只想在更改更多内容之前整理出边距错误）： 代码如下：Javascript 正在尝试为我的游戏服务器设置加载屏幕,javascript,html,css,youtube,game-development,Javascript,Html,Css,Youtube,Game Development,我正试图为我的Garry的Mod服务器设置一个定制的音乐加载屏幕。虽然我有个大问题。每当我输入youtube链接时，它会在屏幕的上边缘增加大约16个像素，导致出现一个大的空白。youtube嵌入设置为0x0 px，因此我无法理解其中的任何内容，我今天花了几个小时查看代码（大部分代码是由另一个用户开源的，我只是在修改），但我什么也找不到。请帮忙！我还想问一下，如果有人知道如何控制视频自动播放时的默认音量，我觉得声音有点太大了。下面是我们将使用的实际加载屏幕的链接（尚未完成，只想在更改更多内容之前整
<!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>
加载
运输署{
填充：5px！重要；
颜色：#FFF；
}
1.没有填充物{
填充：0px！重要；
}
.没有边际{
保证金：0px！重要；
}
.workshopItemPreviewImage{
最大宽度：100%；
文本对齐：右对齐；
边框：2倍实心#FFF；
}
.workshopItemTitle{
颜色：#FFF！重要；
字体大小：15磅！重要；
文本对齐：左对齐；
字体系列：“考山体”，草书；
页边距底部：0px！重要；
文本阴影：0px 1px 1px rgba（0,0,0,1）；
}
.workshopItemShortDesc{
显示：无；
}
.文件评级{
显示：无；
}
.workshopItemAuthor{
左侧填充：10px！重要；
颜色：#fff！重要；
}
.workshopItemAuthorName{
颜色：#fff！重要；
}
.workshopItemAuthorName a{
背景色：#fff！重要；
边界半径：5px！重要；
左侧填充：3px！重要；
右边填充：3px！重要；
文本阴影：0px 1px 1px rgba（0,0,0,1）；
}
.workshopItemAuthor、workshopItemAuthorName、workshopItemAuthorName a{
字体大小：10pt！重要；
文本对齐：左对齐；
字体系列：“龙虾”，草书；
文本阴影：0px 1px 1px rgba（0,0,0,1）；
}
.圆形img{
宽度：100px；
高度：50px；
边界半径：75px；
-webkit边界半径：75px；
-moz边界半径：75px；
/*背景：url(http://link-to-your/image.jpg)不重复*/
}
.白色文本{
颜色：#FFF；
}
.hdr、.hdr跨度{
字体系列：“龙虾”，草书！重要；
字号：22号；
}
.hdr2、.hdr2跨度{
字体系列：“考山体”，草书；
字体大小：18pt！重要；
}
.高密度脂蛋白{
字体系列：“Pacifico”，草书；
字体大小：16pt！重要；
}
.reg tr td{
文本阴影：0px 1px 1px rgba（0,0,0,1）；
}
.左文本{
文本对齐：左对齐；
}
.txt shadow、.txt shadow span、.txt shadow i、.txt shadow strong、.txt shadow p{
文本阴影：0px 1px 1px rgba（0,0,0,1）；
}
.信息箱{
背景：rgba（144144,0.4）；/*40%不透明红色*/
-webkit盒阴影：嵌入0px 1px 2px 3px rgba（50,50,50,0.6）；
-moz盒阴影：嵌入0px 1px 2px 3px rgba（50,50,50,0.6）；
盒影：嵌入0px 1px 2px 3px rgba（50,50,50,0.6）；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
马金托普先生{
利润上限：24px；
}
.loadbarfx{
-webkit盒阴影：嵌入0px 1px 2px 3px rgba（50,50,50,0.6）；
-moz盒阴影：嵌入0px 1px 2px 3px rgba（50,50,50,0.6）；
盒影：嵌入0px 1px 2px 3px rgba（50,50,50,0.6）；
}
如何被禁止
道具推送和垃圾邮件
冲洗袋
困扰球员
麦克风垃圾邮件
恼人的或滞后的构建
任何形式的虐待
缺乏常识
故意使服务器崩溃
可接受
聚乙烯吡咯烷酮
成人内容
鼓励
Wiremod/ACF构建
令人印象深刻的原创E2
协助查找插件bug
Wiremod和Expression 2的教学
服务器位置：德克萨斯州休斯顿
注意：装备武器会移除上帝模式并启用pvp。你必须死才能重新获得上帝模式。
更新：
为3月份更新中添加的新功能添加了子材质工具
SCARS目前处于禁用状态，直到作者修复它（它会导致服务器不断崩溃）
服务器操作员
他们的老板
DeveloperCluelesshobo
莫蒂默-麦克米芒克阻滞剂
❈银❈超级管理员
正在验证研讨会收藏。。。
如何成为管理员
帮助Xonos查找并解决中的错误