-
Notifications
You must be signed in to change notification settings - Fork 2
/
video.html
100 lines (97 loc) · 3.17 KB
/
video.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
<!doctype html>
<html>
<head>
<title>Cold Storage</title>
<link href="//vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.1/video.js"></script>
</head>
<body>
<div style="width:700px;margin:0px auto;">
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="470" height="264"
poster="toute.png"
data-setup='{"controls":true}' style="align:left">
<source src="toute.mp4" type='video/mp4' />
</video>
<div>
<p>
<input type="image" id="jump1" style="height:25px;width:70px;" src="Barcode_02.png" />
<input type="image" id="jump2" style="height:25px;width:60px;" src="Barcode_02.png" />
<input type="image" id="jump3" style="height:25px;width:70px;" src="Barcode_02.png" />
<input type="image" id="jump4" style="height:25px;width:50px;" src="Barcode_02.png" />
<input type="image" id="jump5" style="height:25px;width:70px;" src="Barcode_02.png" />
<input type="image" id="jump6" style="height:25px;width:50px;" src="Barcode_02.png" />
<input type="image" id="jump7" style="height:25px;width:70px;" src="Barcode_02.png" />
</p>
</div>
<script>
var myvideo = document.getElementById('example_video_1'),
playbutton = document.getElementById('playme'),
jumplink1 = document.getElementById('jump1');
jumplink2 = document.getElementById('jump2');
jumplink3 = document.getElementById('jump3');
jumplink4 = document.getElementById('jump4');
jumplink5 = document.getElementById('jump5');
jumplink6 = document.getElementById('jump6');
jumplink7 = document.getElementById('jump7');
jumplink1.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 0;
myvideo.play();
}, false);
jumplink2.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 197;
myvideo.play();
}, false);
jumplink3.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 443;
myvideo.play();
}, false);
jumplink4.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 736;
myvideo.play();
}, false);
jumplink5.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 966;
myvideo.play();
}, false);
jumplink6.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 1187;
myvideo.play();
}, false);
jumplink7.addEventListener("click", function (event) {
event.preventDefault();
myvideo.play();
myvideo.pause();
myvideo.currentTime = 0;
myvideo.play();
}, false);
// only in to demonstrate video
playbutton.addEventListener("click", function () {
if (myvideo.paused) {
myvideo.play();
} else {
myvideo.pause();
}
}, false);
</script>
</div>
</body>
</html>