forked from JasonBWelsh/interactive-video-player
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (75 loc) · 4.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Interactive Video Player</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/mediaelement/4.1.0/mediaelementplayer.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<main class="main-wrap">
<header class="main-header">
<h1 class="name">Interactive Video Player</h1>
<p class="info">Interactive video player using JavaScript, the HTML5 Video API, and <a href="http://www.mediaelementjs.com/" target="_blank">MediaElement.js</a> that synchronizes the video and transcript, and allows users to jump to specified parts of the video by clicking the transcript text. Additonally, the transcript is highlited as the matching section of the video plays. The video player is styled and customized with <a href="http://www.mediaelementjs.com/" target="_blank">MediaElement.js</a> and CSS</p>
</header>
<section class="video-section">
<div class="video-wrap">
<video style="width:100%;height:100%;" id ="my_video" class="mejs__player">
<source src="video_player_v3/video/video.mp4" type="video/mp4">
<source src="video_player_v3/video/video.ogg" type="video/ogg">
</video>
</div><!--/.video-wrap-->
</section>
<section class="caption-section">
<h4 class="caption-instruction">Click sections of text to jump to the corresponding section of the video</h4>
<p>
<span data-start="0.240" data-end="4.130">Now that we've looked at the architecture
of the internet, let's see how you might</span>
<span data-start="4.130" data-end="7.535">connect your personal devices to
the internet inside your house.</span>
<span data-start="7.535" data-end="11.270">Well there are many ways to
connect to the internet, and</span>
<span data-start="11.270" data-end="13.960">most often people connect wirelessly.</span>
</p>
<p>
<span data-start="13.960" data-end="17.940">Let's look at an example of how
you can connect to the internet.</span>
<span data-start="17.940" data-end="22.370">If you live in a city or a town,
you probably have a coaxial cable for</span>
<span data-start="22.370" data-end="26.880">cable Internet, or a phone line if you
have DSL, running to the outside of</span>
<span data-start="26.880" data-end="30.920">your house, that connects you to
the Internet Service Provider, or ISP.</span>
<span data-start="32.100" data-end="34.730">If you live far out in the country,
you'll more likely have</span>
<span data-start="34.730" data-end="39.430">a dish outside your house, connecting
you wirelessly to your closest ISP, or</span>
<span data-start="39.430" data-end="41.190">you might also use the telephone system.</span>
</p>
<p>
<span data-start="42.350" data-end="46.300">Whether a wire comes straight from the ISP hookup outside your house, or</span>
<span data-start="46.300" data-end="49.270">it travels over radio waves from your roof,</span>
<span data-start="49.270" data-end="53.760">the first stop a wire will make once inside your house, is at your modem.</span>
<span data-start="53.760" data-end="57.780">A modem is what connects the internet
to your network at home.</span>
<span data-start="57.780" data-end="60.150">A few common residential modems are DSL or </span>
</p>
</section>
</main>
<footer class="main-footer">
<p>© Jason Welsh 2017</p>
</footer>
<!-- <script>
$('video').mediaelementplayer({
features: ['playpause', 'tracks', 'progress', 'duration', 'volume', 'fullscreen'],
startLanguage: 'en'
});
</script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mediaelement/4.1.0/mediaelement-and-player.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>