/
index.html
64 lines (58 loc) · 2.97 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Soccer Stadium Video Demo</title>
<script src="js/jquery-2.2.3.js"></script>
<script src="js/aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="stadium" src="images/stadium.jpg">
<video id="game1" preload="auto" src="videos/71270683/71270683.mp4" width="160" height="90"></video>
<video id="game2" preload="auto" src="videos/63916604/63916604.mp4" width="160" height="90"></video>
<video id="game3" preload="auto" src="https://s3-us-west-1.amazonaws.com/www.rickroulette.com/rickroll.mp4" width="160" height="90"></video>
</a-assets>
<a-entity position="0 2.0 0">
<a-entity camera look-controls>
<a-cursor color="#ffffff">
<a-animation begin="cursor-mouseenter" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
<a-animation begin="cursor-mouseenter" easing="ease-in" attribute="material.opacity" fill="forwards" from="1" to="0"></a-animation>
<a-animation begin="cursor-mouseleave" easing="ease-in" attribute="scale" fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-mouseleave" easing="ease-in" attribute="material.opacity" fill="forwards" from="0" to="1"></a-animation>
</a-cursor>
</a-entity>
</a-entity>
<a-sky src="#stadium" rotation="0 -180 -2.4"></a-sky>
<a-cylinder position="0 0 0" radius="1" height="1" color="#7BC8A4"></a-cylinder>
<a-entity data-video-source="game1" class="soccer-video" geometry="primitive: plane; width: 28.4; height: 16;" position="-35 11 -60" rotation="0 35 0" material="color: #FFFFFF; shader: flat; src: #game1"></a-entity>
<a-entity data-video-source="game2" class="soccer-video" geometry="primitive: plane; width: 28.4; height: 16;" position="0 11 -68" rotation="0 0 0" material="color: #FFFFFF; shader: flat; src: #game2"></a-entity>
<a-entity data-video-source="game3" class="soccer-video" geometry="primitive: plane; width: 28.4; height: 16;" position="35 11 -60" rotation="0 -35 0" material="color: #FFFFFF; shader: flat; src: #game3"></a-entity>
</a-scene>
<script>
$(document).ready(function () {
var scene = document.querySelector('a-scene');
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener('loaded', run);
}
function run()
{
$("a-entity.soccer-video").each(function () {
var aEntity = $(this);
var videoSource = aEntity.data('videoSource');
var videoDom = $('#' + videoSource).get(0);
videoDom.volume = 0;
videoDom.play();
aEntity.on('cursor-mouseenter', function () {
videoDom.volume = 1;
}).on('cursor-mouseleave', function () {
videoDom.volume = 0;
});
});
}
});
</script>
</body>
</html>