video-player/index.html at main · Mbotunjac/video-player · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
   <!-- displays site properly based on user's device -->

  <title>Video player</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js" async></script>
</head>

<body>
    <div class="container">
        <h1>My video</h1>
            <video class="my-video" id="myVideo">
                <source src="/video/clip1.mp4"/>
            </video>

            <div class="timer">
                <div class = "progress">
                    <input class="seek" id="seekslider" type="range" min="0" max="100" value="0" step="1"/>
                </div>
                <output class="time-out" id="timeOut">Time: 0</output>
            </div>

            <div class="play-buttons">
                <button class="btn play" id="btnPlay">Play</button>
                <button class="btn pause" id="btnPause">Pause</button>
                <button class="btn stop" id="btnStop">Stop</button>
                <button class="btn volume plus" id="btnVolumePlus">Volume +</button>
                <button class="btn volume minus" id="btnVolumeMinus">Volume -</button>
                <button class="btn mute" id ="btnMute">Mute</button>
                <button class="btn fullscreen" id ="btnFullScreen">Fullscreen</button>
                <button class="btn speed up" id="btnSpeedUp">speed +</button>
                <button class="btn speed slow" id="btnSpeedSlow">speed -</button>
            </div>

    </div>
</body>