我的项目与颜色键控视频有关。我在屏幕之间使用 UL 进行导航,我在其中微调键,并在我使用滑块更改键控颜色数量的地方隐藏/显示 div。
所有这些东西单独工作都很好。但是当我试图让它们都在同一页面上工作时,隐藏/显示停止工作。我试过把它拆开,一次又一次地重新组合起来,但我总是在这一点上卡住。代码如下。
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="videoSetup.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="FGSlider/css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="FGSlider/css/ui.slider.extras.css" type="text/css" />
<style type="text/css">
/*body {font-size: 62.5%; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; }*/
fieldset { border:0; margin: 6em; height: 12em;}
label {font-weight: normal; float: left; margin-right: .5em; font-size: 1.1em;}
select {margin-right: 1em; float: left;}
.ui-slider {
clear: both;
top: 5em;
}
.wrap-slider {
padding: 50px;
font-family: Georgia, serif;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<header id="top" class="fluid">
<!-- <div id="container">
<video autoplay id="videoElement">
</video>
</div>-->
<!--from Jeff Burtoft-->
<div class="row">
<!--<div class="span5">-->
<video id="videoElement" controls>
</video>
<canvas id="hiddenCanvas" width="640" height="386"></canvas>
<!-- </div>
<div class="span5">-->
<canvas id="displayCanvas" width="640" height="386"></canvas>
<!--</div>-->
</div>
</header>
</div>
<script src="vidCamAccess.js"></script>
<script src="eyedropper.js"></script>
<script type="text/javascript" src="FGSlider/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="FGSlider/js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="FGSlider/js/selectToUISlider.jQuery.js"></script>
<!--jQuery UI theme switcher -->
<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$(function(){ $('<div style="position: absolute; right: 20px; margin-top: -40px" />').appendTo('body').themeswitcher({onSelect: function(){ setTimeout(fixToolTipColor, 800); }}); });
</script>
<script type="text/javascript">
var videoElement = document.getElementById("videoElement");
var hiddenCanvas = document.getElementById("hiddenCanvas");
var displayCanvas = document.getElementById("displayCanvas");
var hiddenContext = hiddenCanvas.getContext ("2d");
var displayContext = displayCanvas.getContext ("2d");
videoElement.addEventListener('play', function(){runAnalysis();});
var runAnalysis = function(){
if(videoElement.paused || videoElement.ended){
return
}
frameConversion();
if(window.requestAnimationFrame){
requestAnimationFrame(runAnalysis);
}
else{
setTimeout(runAnalysis,0);
}
};
var frameConversion = function(){
hiddenContext.drawImage(videoElement,0,0,videoElement.videoWidth, videoElement.videoHeight);
var frame = hiddenContext.getImageData(0,0,videoElement.videoWidth, videoElement.videoHeight);
var length = frame.data.length;
for (var i =0; i <length; i++){
var r = frame.data [i*4+ 0];
var g = frame.data [i*4 + 1];
var b = frame.data [i*4 + 2];
var p = window.$vars.rgbvalue;
//if(p > 0) {alert ("rgbvalue:" + p [0] + "," + p[1] + "," + p[2])};
/* if(g > 110 && g < 200 && r < 190 && r > 100 && b < 200 && b > 110){
frame.data[i*4+ 3] = 0; */
if(g > p[0]-15 && g < p[0]+15
&& r > p[1]-15 && r < p[1]+15
&& b > p[2]-15 && b < p[2]+15){
frame.data[i*4+ 3] = 0;
}
}
displayContext.putImageData(frame, 0, 0);
return
};
</script>
<!--end jeff's code-->
<div class="wrap-slider">
<p> Adjust the red, green and blue components separately to adjust the key.</p>
<p>RED</p>
<script type="text/javascript">
$(function(){
//demo 1
var abc = $('select#speed').selectToUISlider().next();
fixToolTipColor();
});
//purely for theme-switching demo... ignore this unless you're using a theme switcher
//quick function for tooltip color match
function fixToolTipColor(){
//grab the bg color from the tooltip content - set top border of pointer to same
$('.ui-tooltip-pointer-down-inner').each(function(){
var bWidth = $('.ui-tooltip-pointer-down-inner').css('borderTopWidth');
var bColor = $(this).parents('.ui-slider-tooltip').css('backgroundColor')
$(this).css('border-top', bWidth+' solid '+bColor);
});
}
</script>
<form action="#">
<!-- demo 1 -->
<fieldset>
<label for="speed">Add How many colors to key?</label>
<select name="speed" id="speed">
<option value="0" selected="selected" >0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" >3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
</select>
</fieldset>
</form>
</div>
<p class="instructions fluid">Find a solid colored wall and stand facing away from it about 2 ft. away. The lighting on the wall needs to be as even as possible. Blue or green works best, but it must be a different color than your clothes. Select your FRONT FACING camera if you're doing this by yourself. Or find a friend to help.</p>
<nav id="menuSystem" class="fluid">
<ul id="menus" class="fluid fluidList">
<li class="fluid menuItem zeroMargin_tablet zeroMargin_desktop">Select Key Color</li>
<li class="fluid menuItem" id="adjustKey">Adjust Key</li>
<li class="fluid menuItem">Toggle View</li>
<li class="fluid menuItem">Home</li>
</ul>
</nav>
</header>
</div>
</body>
<script>
$(function () {
$(document).click(function () {
$('.wrap-slider').hide();
});
$('#adjustKey').click(function (event) {
event.stopPropagation();
$('.wrap-slider').toggle();
});
$('.wrap-slider').click(function (event) {
event.stopPropagation();
});
});
$(document).ready(function() {
$('.wrap-slider').hide();
});
</script>
</html>