-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
86 lines (82 loc) · 4.07 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- include A-Frame obviously -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<script>
THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
AFRAME.registerComponent('registerevents', {
init: function () {
var marker = this.el;
// Make the element emit events when found and when lost.
marker.setAttribute('emitevents', 'true');
marker.addEventListener('markerFound', function() {
var markerId = marker.id;
console.log('markerFound', markerId);
console.log("Marker Found!");
video = marker.firstElementChild.getAttribute("src");
video = video.substring(1,video.length);
console.log(video)
document.getElementById(video).play();
});
marker.addEventListener('markerLost', function() {
var markerId = marker.id;
console.log('markerLost', markerId);
console.log("Marker Gone!");
video = marker.firstElementChild.getAttribute("src");
video = video.substring(1,video.length);
console.log(video)
document.getElementById(video).pause();
});
}
});
</script>
<a-scene embedded arjs='debugUIEnabled: false; patternRatio: 0.9' vr-mode-ui="enabled: false">
<!--Assets-->
<a-assets>
<video id="carnavalito" loop="true" src="video/carnavalito.mp4"></video>
<video id="cueca" loop="true" src="video/cueca.mp4"></video>
<video id="mapuche" loop="true" src="video/mapuche.mp4"></video>
<video id="sajuarina" loop="true" src="video/sajuarina.mp4"></video>
<video id="musica-norte" loop="true" src="video/musica-norte.mp4"></video>
<video id="musica-centro" loop="true" src="video/musica-centro.mp4"></video>
<video id="musica-sur" loop="true" src="video/musica-sur.mp4"></video>
<video id="musica-rapa" loop="true" src="video/musica-rapa.mp4"></video>
</a-assets>
<!-- define your markers -->
<a-marker type='pattern' url="patt/carnavalito.patt"registerevents >
<a-video src="#carnavalito" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/cueca.patt"registerevents >
<a-video src="#cueca" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/mapuche.patt"registerevents >
<a-video src="#mapuche" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/sajuarina.patt"registerevents >
<a-video src="#sajuarina" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/musica-norte.patt"registerevents >
<a-video src="#musica-norte" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/musica-centro.patt"registerevents >
<a-video src="#musica-centro" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/musica-sur.patt"registerevents >
<a-video src="#musica-sur" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<a-marker type='pattern' url="patt/musica-rapa.patt"registerevents >
<a-video src="#musica-rapa" width="2.7" height="1.5" position="0 0 0" rotation="-90 0 0"></a-video>
</a-marker>
<!-- define a simple camera -->
<a-entity camera></a-entity>
</a-scene>
</body>
</html>