-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (81 loc) · 3.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML Video Scrubber</title>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>HTML <code>video</code> Scrubbar</h1>
<p>
This experiment explores how a video player scrubbar would look like if it
didn't contain full frames one next to another to fill the available space
with as many full frames as possible, but instead if each unit of resolution
of the available space was painted with a slice through the middle of the
video at that time.
</p>
<p>
Would the parts of the video be recognizable? Would it help see cuts and
landmarks better? Would it be preferrable to the status quo? You decide.
</p>
<!-- https://commons.wikimedia.org/wiki/File:HERO_-_Blender_Open_Movie-full_movie.webm -->
<!-- 2,048 × 858 pixels -->
<video id="playerVideo" controls muted src="blender-hero.webm"></video>
<div id="canvasDiv"></div>
<p>
Movie <em>Hero</em> made by <em>Blender</em> and obtained from <em>Wikimedia</em>.
<a href="https://commons.wikimedia.org/wiki/File:HERO_-_Blender_Open_Movie-full_movie.webm">Source</a>
</p>
<h2>Generate scrubbar by seeking with sliding</h2>
<p>
This is the same as the method below but instead of always taking the middle
slice from the frame, it takes a slice where if the scrubbar was filled with
frames side by side, the current position intersects the frame at some ratio
of its width and that same ratio of its width is used to take the slice in
the source video frame.
</p>
<p>
This provides much better results in static scenes and no worse results in
dynamic ones.
</p>
<button id="seekingSlidingButton">Generate scrubbar by seeking with sliding</button>
<p>It should generate this:</p>
<img src="blender-hero-seeking-sliding.png" />
<h2>Generate scrubbar by seeking</h2>
<p>
This method seeks the video at times corresponding with each unit of resolution
of the available scrubbar space. It looks like a very jittery playback and
the spinner is blinking throughout of the generation process, so it is not
very suitable, but is the most efficient (each unit is generated once).
</p>
<button id="seekingButton">Generate scrubbar by seeking</button>
<p>It should generate this:</p>
<img src="blender-hero-seeking.png" />
<h2>Generate scrubbar as playing with sliding</h2>
<p>
This is the same principle as the seeking sliding version with the same
benefit of the playing version (not hijacking the playback position), but
also the same drawback (gaps in continuous playback and taking longer to
generate).
</p>
<button id="playingSlidingButton">Generate scrubbar as playing with sliding</button>
<p>It should generate this:</p>
<img src="blender-hero-playing-sliding.png" />
<h2>Generate scrubbar as playing</h2>
<p>
This method makes use of the <code>timeupdate</code> event of a playing
video. It is real-time (so potentially slower than the seeking method) and
is dependent on the playback state of the video, but makes for a more
useful user experience.
</p>
<p>
To avoid gaps caused by potentially low time update event firing frequency,
several units are painted each time to ensure to cover the gaps in case of
a real time playback even if the update frequency is low.
</p>
<button id="playingButton">Generate scrubbar as playing</button>
<p>It should generate this:</p>
<img src="blender-hero-playing.png" />
</body>
</html>