-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
hyperaudio-template.html
48 lines (42 loc) · 2.23 KB
/
hyperaudio-template.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hyperaudio – Interactive Transcript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/css/hyperaudio-lite-player.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/css/share-this.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
</head>
<body>
<video id="hyperplayer" class="hyperaudio-player" style="z-index: 5000000; position:relative; width:100%" src="{sourcemedia}" type="video/mp4" controls>
<track id="hyperplayer-vtt" label="English" kind="subtitles" srclang="en" src="{sourcevtt}">
</video>
<div id="hypertranscript" class="hyperaudio-transcript" style="overflow-y:scroll; height:600px; position:relative; border-style:dashed; border-width: 1px; border-color:#999; padding: 8px">
{hypertranscript}
</div>
<p>
<form id="searchForm" style="float:right">
Playback Rate <span id="currentPbr">1</span><input id="pbr" type="range" value="1" min="0.5" max="3" step="0.1" style="width:50px">
</form>
</p>
<script src="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/js/hyperaudio-lite.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/js/hyperaudio-lite-extension.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/js/share-this.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/js/share-this-twitter.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hyperaudio/hyperaudio-lite/js/share-this-clipboard.js"></script>
<script>
ShareThis({
sharers: [ ShareThisViaTwitter, ShareThisViaClipboard ],
selector: "article"
}).init();
// minimizedMode is still experimental - it aims to show the current words in the title, which can be seen on the browser tab.
let minimizedMode = false;
let autoScroll = true;
let doubleClick = false;
let webMonetization = true;
let playOnClick = true;
new HyperaudioLite("hypertranscript", "hyperplayer", minimizedMode, autoScroll, doubleClick, webMonetization, playOnClick);
</script>
</body>
</html>