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">← 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 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"> times</li>
<li><abbr title="creation time">c</abbr> {created}</li>
<li><abbr title="modification time">m</abbr> {modified}</li>
</ul>
</footer>
</body>
</html>
|
