|
|
|
@ -1,68 +1,72 @@
|
|
|
|
<html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
|
|
<meta http-equiv="content-type" content="text/html;charset=utf-8">
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
body {
|
|
|
|
background-color: #000;
|
|
|
|
background-color: #000;
|
|
|
|
cursor: none;
|
|
|
|
cursor: none;
|
|
|
|
}
|
|
|
|
background-image: url(/images/bg.png);
|
|
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
video {
|
|
|
|
background-position: center center;
|
|
|
|
width: 100%;
|
|
|
|
background-size: auto;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.box {
|
|
|
|
video {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
width: 220px;
|
|
|
|
height: 100%;
|
|
|
|
height: 120px;
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
|
|
|
left: 0;
|
|
|
|
bottom: 0;
|
|
|
|
z-index: 10;
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
margin: auto;
|
|
|
|
|
|
|
|
background-color: #f8f0f0;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
border: 1px solid #d3b2b2;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.box .info {
|
|
|
|
.box {
|
|
|
|
position: relative;
|
|
|
|
position: absolute;
|
|
|
|
height: 80px;
|
|
|
|
width: 220px;
|
|
|
|
line-height: 80px;
|
|
|
|
height: 120px;
|
|
|
|
margin: 0 auto;
|
|
|
|
top: 0;
|
|
|
|
text-align: center;
|
|
|
|
right: 0;
|
|
|
|
font-size: 18px;
|
|
|
|
bottom: 0;
|
|
|
|
}
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
|
|
background-color: #f8f0f0;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
border: 1px solid #d3b2b2;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info.volume {
|
|
|
|
.box .info {
|
|
|
|
background: url(images/volume.png) center center no-repeat;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.box .line {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
position: relative;
|
|
|
|
width: 200px;
|
|
|
|
height: 80px;
|
|
|
|
|
|
|
|
line-height: 80px;
|
|
|
|
margin: 0 auto;
|
|
|
|
margin: 0 auto;
|
|
|
|
border-bottom: 2px solid #999;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.line .point {
|
|
|
|
.info.volume {
|
|
|
|
position: absolute;
|
|
|
|
background: url(images/volume.png) center center no-repeat;
|
|
|
|
top: -5px;
|
|
|
|
}
|
|
|
|
width: 0;
|
|
|
|
|
|
|
|
height: 0;
|
|
|
|
.box .line {
|
|
|
|
border: 5px solid #999;
|
|
|
|
position: relative;
|
|
|
|
border-radius: 50%;
|
|
|
|
width: 200px;
|
|
|
|
}
|
|
|
|
margin: 0 auto;
|
|
|
|
</style>
|
|
|
|
border-bottom: 2px solid #999;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.line .point {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: -5px;
|
|
|
|
|
|
|
|
width: 0;
|
|
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
|
|
border: 5px solid #999;
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<video id="player" autoplay></video>
|
|
|
|
<video id="player" autoplay></video>
|
|
|
|
@ -103,6 +107,9 @@
|
|
|
|
var vtimer;
|
|
|
|
var vtimer;
|
|
|
|
var stimer;
|
|
|
|
var stimer;
|
|
|
|
player.volume = 0.5;
|
|
|
|
player.volume = 0.5;
|
|
|
|
|
|
|
|
player.onended = function () {
|
|
|
|
|
|
|
|
player.play();
|
|
|
|
|
|
|
|
};
|
|
|
|
function onvolumechange() {
|
|
|
|
function onvolumechange() {
|
|
|
|
var vol = document.getElementById('vol');
|
|
|
|
var vol = document.getElementById('vol');
|
|
|
|
vol.style.display = 'block';
|
|
|
|
vol.style.display = 'block';
|
|
|
|
|
