about summary refs log tree commit diff
path: root/converge/example.html
blob: 970cc064a4305df8a945be0f514426ed1466ee90 (plain)
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
/Users/gen/src/inf/served/touching-grass.html
/Users/gen/src/inf/fixtures/post.html
/Users/gen/src/inf/fixtures/base.html
Looking for html
Looking for head
Looking for title
	closed title
	closed head
Looking for body
Looking for ul
Looking for li
Looking for a
	closed a
	closed li
	closed ul
Looking for main
	closed main
Looking for footer
Looking for ul
Looking for li
	closed li
Looking for li
Looking for abbr
	closed abbr
	closed li
Looking for li
Looking for abbr
	closed abbr
	closed li
	closed ul
	closed footer
	closed body
	closed html
Looking for nav
Looking for a
	closed a
	closed nav
BEFORE
Looking for main
	closed main
Looking for section
Looking for video
	closed video
Looking for ul
Looking for li
	closed li
Looking for li
Looking for a
	closed a
	closed li
Looking for li
Looking for a
	closed a
	closed li
Looking for li
	closed li
Looking for li
Looking for input
Looking for label
	closed label
	closed input
	closed li
	closed ul
	closed section
Looking for script
	parse special
Looking for p
	closed p
Looking for p
	closed p
Looking for p
Looking for span
	closed span
Looking for i
	closed i
Looking for span
	closed span
	closed p
Looking for p
	closed p
<html>

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta charset="utf-8" />

	<link rel="icon" type="image/png" href="/3directions.png" />
	<link rel="icon" type="image/svg+xml" href="/3directions.svg" />

	<title></title>

	<link rel="stylesheet" href="/styles/common.css" />
</head>

<body>
	<ul id="nav-access">
		<li><a href="#content">Skip to main content</a></li>
	</ul>

	<nav class="sized">
	<a id="home" href="/" alt="home">&larr; home</a>
</nav><main id="content" class="writing sized"><section style="width: 100%; text-align: right; padding: 8px 0">
	<video id="grass" controls width="100%" poster="grass_poster.jpg" preload="metadata" loop>
		<source src="grass_720p.mp4" type="video/mp4" />
		<track default src="grass.vtt" />
	</video>
	<ul>
		<li class="small">download</li>
		<li><a href="grass.mp4" download>[1080p | 7.1MB]</a></li>
		<li><a href="grass_720p.mp4" download>[720p | 1.9MB]</a></li>
		<li id="long"></li>
		<li><input type="checkbox" checked id="loop"><label> loop video?</label></input></li>
	</ul>
</section>

<script>
	document.addEventListener("DOMContentLoaded", setup);

	const video = document.getElementById("grass");
	function setup() {
		let marks = document.getElementsByClassName("mark");
		for (let i = 0; i < marks.length; ++i) {
			marks[i].addEventListener('click', markClick)
		}
		console.log(marks);

		let loop = document.getElementById('loop');
		loop.addEventListener('change', loopChanged)

		// Fire once with a fake event so we aren't desynced
		loopChanged({ 'target': loop });
	}

	function markClick(event) {
		let target = event.target;
		let time = parseFloat(target.getAttribute('data-time'));
		console.log(`seeking to ${time}`)
		video.currentTime = time;
	}

	function loopChanged(event) {
		let target = event.target;
		let checked = target.checked;
		console.log(`video looping: ${checked}`);
		video.loop = checked;
	}
</script>

<p>
	I took this short video to send to a friend one day and accidentally
	made a 106 frame masterpiece. Well, that's hyperbolic. But there's a
	lot I enjoy about it.
</p>

<p>
	The contrast between my orange painted nails and the surprisingly
	green grass is pretty pleasing. I think the gentle brown of the brick
	in the bottom-left corner helps keep from an overwhelming greenery.
	Thanks bricks :)
</p>

<p>
	The accidental camera movement is nice, too. I like the angle the camera is at and the way it wobbles.
	It's clearly hand-held. At <span class="mark" data-time="1.3">1.3-ish-seconds</span>
	you can see I gently sway forward, but seem to be less wobbly. <i>I'm braced;
		I'm stable! I have-three-points-of-contact-with-the-ground!</i> Then, at roughly
	<span class="mark" data-time="1.9">2&nbsp;seconds</span> when the grass finally
	yields, I get rocked back and wobbles resume.
</p>

<p>
	The sound! And the sound. The ripping of the grass. That planty matter finally giving way. The fibrous tearing.
	I just like it; I enjoy it! I greatly appreciate it.
</p></main>

	<footer class="sized">
		<ul id="dates">
			<li id="dates-title">&nbsp;times</li>
			<li><abbr title="creation time">c</abbr> {created}</li>
			<li><abbr title="modification time">m</abbr> {modified}</li>
		</ul>
	</footer>
</body>

</html>