forked from hybrid-publishing-lab/hybrid-lecture-player
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·172 lines (157 loc) · 10.3 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
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
<!DOCTYPE HTML>
<html>
<head>
<title>HYBRID PLAYER</title>
<!-- Hybrid Video CSS -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="shortcut icon" href="images/favicon.ico" />
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<!-- SCROLLTO -->
<script src="js/scrollTo/jquery.scrollTo.js"></script>
<!-- Hybrid Video app code -->
<script src="js/HybridVideo.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- all the external links open in a new tab -->
<base target="_blank">
<!-- for Facebook -->
<meta property="og:title" content="Hybrid Lecture Player" />
<meta property="og:type" content="Software" />
<meta property="og:image" content="" src="images/HLP6.png"/>
<meta property="og:url" content="https://hlp.consortium.io/" />
<meta property="og:description" content="A platform that turn your lecture into a multi-format publication, video subtitles, transcription, translations, slides, audio, with sychronisation, citation, deeplinking and bookmarks" />
<!-- for Twitter -->
<meta name="twitter:card" content="Software" />
<meta name="twitter:title" content="Hybrid Lecture Player" />
<meta name="twitter:description" content="A platform that turn your lecture into a multi-format publication, video subtitles, transcription, translations, slides, audio, with sychronisation, citation, deeplinking and bookmarks" />
<meta name="twitter:image" content="images/HLP6.png" />
<!-- for Google tracking-->
<!-- <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-', 'auto');
ga('send', 'pageview');
</script> -->
</head>
<body>
<div class="title-lecture-print print-only">TITLE OF THE LECTURE FOR PRINT</div>
<!-- HEADER -->
<header>
<div class="title">
<div class="title-HLP">HYBRID LECTURE PLAYER</div>
<div class="title-lecture">TITLE OF THE LECTURE</div>
</div>
<div id="chapters">
<!-- TABS CONTAINER -->
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">SECTIONS</label>
<div class="content">
<div class="chapter-title" onclick="goToChapter(0)" onmouseover="changePrecisContent(1)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>BEGINNING</div>
<div class="chapter-title" onclick="goToChapter(8)" onmouseover="changePrecisContent(2)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>AN OVERVIEW</div>
<div class="chapter-title" onclick="goToChapter(12)" onmouseover="changePrecisContent(3)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>VIDEO, SLIDES AND SUBTITLES</div>
<div class="chapter-title" onclick="goToChapter(17)" onmouseover="changePrecisContent(4)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>TRANSCRIPTION TEXT</div>
<div class="chapter-title" onclick="goToChapter(24)" onmouseover="changePrecisContent(5)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>RELATED CONTENT, ADDITIONAL MATERIALS</div>
<div class="chapter-title" onclick="goToChapter(28)" onmouseover="changePrecisContent(6)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>CUSTOM ENTRY POINTS</div>
<div class="chapter-title" onclick="goToChapter(35)" onmouseover="changePrecisContent(7)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>SYNCHRONIZATION</div>
<div class="chapter-title" onclick="goToChapter(39)" onmouseover="changePrecisContent(8)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>PRINT & PDF</div>
<div class="chapter-title" onclick="goToChapter(43)" onmouseover="changePrecisContent(9)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>THE END</div>
</div>
<!-- end div content -->
</div>
<!-- end div tab -->
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">CUSTOM SECTIONS</label>
<div class="content">
<!-- Publications -->
<div class="chapter-title publication" onclick="goToChapter(2275)" onmouseover="changePrecisContent(10)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>CUSTOM SECTION A</div>
<div class="chapter-title publication" onclick="goToChapter(2845)" onmouseover="changePrecisContent(11)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>CUSTOM SECTION B</div>
<div class="chapter-title publication" onclick="goToChapter(3295)" onmouseover="changePrecisContent(12)" onmouseleave="changePrecisContent(0)"> <span class="play-button">► </span>CUSTOM SECTION C</div>
</div>
<!-- end div content -->
</div>
<!-- end div tab -->
</div>
<!-- end div tabs -->
</div>
<!-- end div chapters -->
<!--SECTIONS DESCRIPTIONS-->
<div id="precis">
<!--Short description of the whole lecture/project. Default text when the mouse is not on the sections (same as in HybridVideo.js > Change Precis Content)-->
Description: A guided tour in the Hybrid Lecture Player, multi-format publication tool.
</div>
<!-- end div precis -->
</header>
<!-- MAIN BOXES: SLIDES + VIDEO + TRANSCRIPTION + ADDITIONAL MATERIALS-->
<article>
<!-- LEFT COLUMN -->
<div id="left-column">
<!-- SLIDES -->
<div id="slide-container">
<img id="img" src="images/Slide001.jpg">
</div>
</div>
<!-- RIGHT COLUMN -->
<div id="right-column">
<!-- VIDEO -->
<div id="video-container">
<div id="player"></div>
</div>
<!-- BELOW THE VIDEO -->
<div id="below-video-container">
<!-- SUBTITLES -->
<div id="transcription-line">Lecture will begin shortly.</div>
<div id="citation-button">
<button type="button" onclick="makeCitation()">SHARE SECTION</button>
</div>
<div id="language-button">
<select name='language' onchange="if (this.selectedIndex) changeLanguage(this.selectedIndex);">
<option class='head'>Language</option>
<option value='1' selected="selected">English</option>
<option value='2'>Español</option>
</select>
</div>
</div>
</div>
<!-- TRANSCRIPTION -->
<div id="transcription-container">
<div id="transcription-button">
<button type="button" onclick="synchronizeTranscription()">SYNCHRONIZE TRANSCRIPTION</button> <a href="manual.pdf"><button id="download-pdf" type="button">DOWNLOAD PDF</button></a>
</div>
<div id="transcription"></div>
</div>
<div id="xtra">
<!--Contextual Information is added here.-->
</div>
</article>
<!-- FOOTER -->
<footer>
<div class="credits slide_up">
<div>A Hybrid Publishing Consortium project | <a href="http://www.consortium.io/about">About us</a> | Research: <a href="https://research.consortium.io/docs/traces_on_the_archive/traces_on_the_archive.html">Traces on the Archive</a> | <a href="https://github.com/consortium/hybrid-lecture-player">Software (GitHub)</a> | <a href="mailto:[email protected]">Contact</a>
<br/>MORE <span style="font-size: 12px; vertical-align: 2px;">▼</span>
</div>
</div>
<div id="footer_slide">
<img src="images/logo_EU.jpg
" style="height: 80px; margin-right: 10px;" alt="Europa">
<img src="images/logo_EuropafoerdertNds.jpg" style="width: 80px; margin-right: 10px;" alt="Niedersachsen">
<img src="images/logo_leuphana.jpg" style="width: 80px; margin-right: 10px;" alt="Leuphana">
<br/>
<br/>Funded by the EU major project Innovation Incubator Lüneburg
<br/>HPC is part of the Hybrid Publishing Lab at the Centre for Digital Cultures, Leuphana University, Lüneburg, Germany and is funded by the European Union and the German federal State of Lower Saxony.
<br/>
<br/>Credits
<br/>Simon Worthington: Concept, Project Lead | Christina Kral: Concept, Project Manager | Daniel Jackson: Avco Ltd, software tool developer | Loraine Furter: Interface Design | Johannes Amorosa: Sysadmin
<br/>
<br/> <a href="https://github.com/consortium/hybrid-lecture-player">Video, text and image copyrights</a>
<br/>
<br/> <a href="http://www.leuphana.de/en/site-notice-leuphana.html">Imprint</a>
</div>
</footer>
</body>
</html>