-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (53 loc) · 1.77 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
<html>
<head>
<link href="http://vjs.zencdn.net/5.3.0/video-js.min.css" rel="stylesheet" />
<script src="http://vjs.zencdn.net/5.3.0/video.js"></script>
<script src="Youtube.js"></script>
<style type="text/css">
input, a {
margin: 20px;
}
</style>
</head>
<body style="margin: auto auto">
<center>
<input type="text" id="youtube_url" placeholder="http://www.youtube.com/watch?v=xxx"></input>
<a href="javascript://" onclick="player.src(document.getElementById('youtube_url').value);">Load</a>
<video
id="player"
class="video-js vjs-default-skin"
controls
autoplay
width="640" height="264"
data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=E_GrwhpIwrI"}] }'
></video>
<br /><br />
<b>Instructions</b>
<p>▼ Press the DOWN Arrow Key on your keyboard to set a point to come back to.</p>
<p>▲ Press the UP Arrow Key on your keyboard to go back to that point.</p>
<p>◀ Press the LEFT Arrow Key on your keyboard to go back 5 seconds.</p>
<p>▶ Press the RIGHT Arrow Key on your keyboard to go forward 5 seconds.</p>
</center>
</body>
</html>
<script type="text/javascript">
var player = videojs('player');
var startTime = 0
document.onkeypress = function(e) {
switch(e.key) {
case "ArrowDown":
startTime = player.currentTime();
break;
case "ArrowLeft":
player.currentTime(player.currentTime() - 5);
break;
case "ArrowRight":
player.currentTime(player.currentTime() + 5);
break;
case "ArrowUp":
case " ":
player.currentTime(startTime);
break;
}
}
</script>