반응형
1. 동영상, 자막 컨트롤
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
// 키보드를 눌렀을 때
$(document).keydown(function(e){
var keyCode = "";
if(e.which){
keyCode = e.which;
}
else{
keyCode = e.keyCode;
}
// 스크롤 움직이지 않게
if(keyCode > 36 && keyCode<41){
$(window).scrollTop(0);
}
//왼쪽 화살표
if(keyCode==37){
$("#smi").css("left","-=10px");
}
//위쪽 화살표
else if(keyCode==38){
$("#smi").css("top","-=10px");
}
//오른쪽 화살표
else if(keyCode==39){
$("#smi").css("left","+=10px");
}
//아래쪽 화살표
else if(keyCode==40){
$("#smi").css("top","+=10px");
}
});
// 불 투명도 조절
$(document).ready(function(){
$("#smiBackground").css("opacity",0.5);
});
// undefined : java에서 null과 같음
var video = undefined;
var duration = undefined;
var currentTime = undefined;
var interval = undefined;
var recommendVideo = undefined;
function play(){
if(video == undefined){
video = document.getElementById("video");
}
if(duration == undefined){
duration = document.getElementById("duration");
}
if(currentTime == undefined){
currentTime = document.getElementById("currentTime");
}
if(recommendVideo == undefined){
recommendVideo = document.getElementById("recommendVideo");
}
video.play();
duration.innerText = video.duration;
var textSmi ="";
var startTime = 0;
var endTime = 0;
interval = setInterval(function(){
currentTime.innerText = video.currentTime
if(parseFloat(duration.innerText) <= parseFloat(currentTime.innerText)){
recommendVideo.style.display = "block";
clearInterval(interval);
}
else{
$(".textSmi").each(function(index, smi){
//console.log($(smi).val());
// 현재시간이 data-start와 data-end에 포함되는지.
startTime = parseFloat($(smi).attr("data-start"));
endTime = parseFloat($(smi).attr("data-end"));
if(video.currentTime >= startTime && video.currentTime <= endTime){
textSmi = $(smi).val();
}
});
if(textSmi != ""){
$("#smiBackground").text( textSmi );
$("#smiBackground").show();
}
else{
$("#smiBackground").hide();
}
textSmi = "";
}
},50);
//$("#smiBackground").text($(".textSmi").val());
}
function stop(){
if(video == undefined){
video = document.getElementById("video");
}
if(duration == undefined){
duration = document.getElementById("duration");
}
if(currentTime == undefined){
currentTime = document.getElementById("currentTime");
}
video.pause();
clearInterval(interval);
}
</script>
</head>
<body>
<div style="height: 350px; padding:0px; margin:0px;">
<!-- video와 audio는 속성이 같다. 오디오만 보여주고 싶으면 video를 audio로 바꾸면 됨. -->
<video id="video" width="500" height="350" controls>
<source src = "http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/>
</video>
<div id="recommendVideo" style="position:relative; width:500px; height:350px; background-color: skyblue; top: -350px; display:none">
추천영상!!
</div>
<!-- 자막 -->
<div id="smi" style="position:relative; width:500px; height:350px; top:-350px; left:0px; display:block">
<div style="height:250px"> </div>
<p style="text-align:center;">
<img width="150" height="150" src="http://inwallspeakers1.com/wp-content/uploads/2014/10/dr-dre-beats-logo.png"/>
<span id="smiBackground" style="background-color:#000; color:#fff; padding:5px">
안녕하세요~!
</span>
</p>
</div>
</div>
<br/>
<input type="button" value="play" onclick="play();"/>
<input type="button" value="pause" onclick="stop();"/>
<br/>
총 재생 시간 : <span id="duration"></span><br/>
현재 재생 시간 : <span id="currentTime"></span><br/>
<input type="text" class="textSmi" value="까악~" data-start="1" data-end="1.2"/>
<input type="text" class="textSmi" value="두번째에요~" data-start="10" data-end="15"/>
</body>
</html> |
cs |
2. 큐브 구현
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142 |
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.stage {
padding-top: 200px;
-webkit-perspective:400;
-ms-perspective:400;
-o-perspective:400;
-moz-perspective:400px;
perspective:400;
}
.cube {
height: 100px;
width: 100px;
position: relative;
margin: 0 auto;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform: rotateY(30deg) rotateX(30deg);
-webkit-transform: rotateY(30deg) rotateX(30deg);
-ms-transform: rotateY(30deg) rotateX(30deg);
-o-transform: rotateY(30deg) rotateX(30deg);
z-index: 1;
}
.second {
top: -100px;
transform: rotateY(30deg) rotateX(30deg) translateZ(-400px);
-webkit-transform: rotateY(30deg) rotateX(30deg) translateZ(-400px);
-ms-transform: rotateY(30deg) rotateX(30deg) translateZ(-400px);
-o-transform: rotateY(30deg) rotateX(30deg) translateZ(-400px);
z-index: 0;
}
.cube div {
height: 100px;
width: 100px;
position: absolute;
color: #fff;
text-align: center;
line-height: 100px;
}
.top {
background: rgba(0,0,0,0.7);
top: -50px;
left: 0px;
transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
}
.bottom {
background: rgba(0,0,0,0.7);
top: 50px;
left: 0px;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
}
.left {
background: rgba(0,160,233,0.7);
top: 0px;
left: -50px;
transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
}
.right {
background: rgba(0,160,233,0.7);
top: 0px;
right: -50px;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
}
.front {
background: rgba(215,0,81,0.7);
top: 0px;
left: 0px;
transform: translateZ(50px);
-webkit-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
-moz-transform: translateZ(50px);
}
.back {
background: rgba(215,0,81,0.7);
top: 0px;
left: 0px;
transform: translateZ(-50px);
-webkit-transform: translateZ(-50px);
-ms-transform: translateZ(-50px);
-o-transform: translateZ(-50px);
-moz-transform: translateZ(-50px);
}
</style>
</head>
<body>
<div class="stage">
<div class="cube">
<div class="top">TOP</div>
<div class="bottom">BOTTOM</div>
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="back">BACK</div>
<div class="front">FRONT</div>
</div>
<div class="cube second">
<div class="top">TOP</div>
<div class="bottom">BOTTOM</div>
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="back">BACK</div>
<div class="front">FRONT</div>
</div>
</div>
</body>
</html> |
cs |
반응형
'IT > Spring' 카테고리의 다른 글
| 메이블 플러그인 빌드 에러 (0) | 2015.04.27 |
|---|---|
| Enum(이늄) (0) | 2015.04.27 |
| (Spring) SLF4J와 Logback을 이용한 로그 남기기[2015.04.07] (0) | 2015.04.07 |
| (Spring) bean confin 설정 분리하기[2015.04.07] (0) | 2015.04.07 |
| (Spring) Interceptor [2015.04.07] (0) | 2015.04.07 |