-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (87 loc) · 4.26 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/assets/vr.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/libs/aframe.min.js"></script>
<script src="/main/main.js" type="module"></script>
<title>aframe vr player</title>
</head>
<body>
<input type="file" id="fileInput" style="display: none;">
<a-scene background="color: grey">
<a-entity id="events" events></a-entity>
<a-entity id="settings" settings></a-entity>
<a-entity id="video-state" video-state></a-entity>
<a-assets>
<img id="asset-vp-play" src="assets/play.png">
<img id="asset-vp-pause" src="assets/pause.png">
<img id="asset-vp-stop" src="assets/stop.png">
<img id="asset-vp-seek-forward" src="assets/seek-forward.png">
<img id="asset-vp-seek-backward" src="assets/seek-backward.png">
<img id="asset-vp-hide-ui" src="assets/hide-ui.png">
<img id="asset-vp-open-file" src="assets/open-file.png">
<img id="asset-vp-voli" src="assets/vol-incr.png">
<img id="asset-vp-vold" src="assets/vol-decr.png">
<img id="asset-back" src="assets/back.png">
<img id="asset-loading" src="assets/loading.gif">
<img id="asset-up" src="assets/up.png">
<img id="asset-hide-files" src="assets/hide-files-ui.png">
<img id="asset-folder" src="assets/folder.png">
<img id="asset-movie-icon" src="assets/movie.png">
<img id="asset-unknown" src="assets/unknown.png">
<img id="asset-refresh" src="assets/refresh.png">
<img id="asset-settings" src="assets/settings.png">
<img id="asset-check" src="assets/check.png">
<img id="asset-uncheck" src="assets/uncheck.png">
</a-assets>
<!-- <a-entity environment="preset: starry"></a-entity> -->
<video id="video" src="assets/sample.mp4"></video>
<!-- camera stuff -->
<a-entity id="cameraRig" adjust-camera position="0 0 0">
<!-- camera-wrapper rotates around camera-rig for recenter -->
<a-entity recenter clickable geometry="primitive: sphere; radius: 80; segmentsWidth: 8; segmentsHeight: 8"
material="opacity: 0; side: back">
<a-entity id="cameraWrapper">
<!-- camera rotation controlled by vrheadset/mousekeyboard -->
<a-entity id="camera" camera look-controls stereocam="eye:left">
<!-- cursor stuff -->
<a-entity id="cursor" controls cursor-util>
</a-entity>
<!-- subtitles -->
<a-text id="subtitles" position="0 -1.5 -5" width="5" align="center">
<a-plane visible="false"></a-plane>
</a-text>
</a-entity>
</a-entity>
</a-entity>
</a-entity>
<!-- video player -->
<a-entity id="env" env-manager></a-entity>
<!-- video player ui -->
<a-entity id="controls" position="0 0 0" rotation="0 0 0">
<a-entity id="timeline" geometry="primitive: plane; width: 60; height: 6" position="0 1.5 -60"
material="color: #333" video-controls timeline controls clickable>
</a-entity>
<a-entity id="vol" btn-vol clickable button-highlight controls position="-25 -5 -60"></a-entity>
<a-image btn-open-file clickable button-highlight controls src="#asset-vp-open-file" position="-14 -5 -60"
scale="5 5 1"></a-image>
<a-image btn-seek-back clickable button-highlight controls src="#asset-vp-seek-backward" position="-7 -5 -60"
scale="5 5 1"></a-image>
<a-image btn-pause-play clickable button-highlight controls src="#asset-vp-play" position="0 -5 -60"
scale="5 5 1"></a-image>
<a-image btn-seek-forw clickable button-highlight controls src="#asset-vp-seek-forward" position="7 -5 -60"
scale="5 5 1"></a-image>
<a-image btn-hide-controls clickable button-highlight controls src="#asset-vp-hide-ui" position="14 -5 -60"
scale="5 5 1"></a-image>
<a-image btn-settings clickable button-highlight controls src="#asset-settings" position="21 -5 -60"
scale="5 5 1"></a-image>
<a-entity id="toggleAdjustUi" toggle-adjust-ui controls>
</a-entity>
<a-entity dialog-utils id="dialog" position="0 25 -50" rotation="15 0 0" visible="false">
</a-entity>
</a-entity>
</a-scene>
</body>
</html>