-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
188 lines (143 loc) · 7.53 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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>GRT JS Video Player - LightWeight Free Javascript Video Player</title>
<meta name="description" content="GRT Cookie Consent for GDPR Law - jQuery Plugin">
<meta name="author" content="grt107">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Demo CSS file not needed for the plugin -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="css-demo-page.css">
<!-- GRT JS Video Player CSS -->
<link rel="stylesheet" href="grt-js-video-player.css" type="text/css" media="all" />
</head>
<body>
<div class="demo-page-container">
<!-- Github Button -->
<div class="github-position">
<a class="github-button" href="https://github.com/grt107/grt-js-video-player"
data-icon="octicon-cloud-download" data-size="large"
aria-label="Download grt107/grt-js-video-player on GitHub">Download</a>
<a class="github-button" href="https://github.com/grt107" data-size="large"
aria-label="Follow @grt107 on GitHub">Follow @grt107</a>
</div>
<h3>GRT JS Video Player - LightWeight Free Javascript Video Player</h3>
<p class="header-par">Simple and lightweight JavaScript HTML5 video player used for playing different video formats on websites.<br/><br/>
This player supports all the basic modern features. You can change aspect ratio, autoplay, full screen, PIP (picture in picture), volume, controls visibility, and much more. Please read the integration below for all the available options.</p>
<h5>Demo</h5>
<div grtvideoplayer-url="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></div>
<h5>How to use the Video Player on your website</h5>
<p>1- Include the player stylesheet file <strong>grt-js-video-player.css</strong> inside the
<strong><head></strong> tag.</p>
<code><link rel="stylesheet" href="grt-js-video-player.css"></code>
<p>2- Include the javascript file <strong>grt-js-video-player.js</strong> before the closing <strong><body></strong> tag.</p>
<code><script src="grt-js-video-player.js"></script></code>
<p>3- Add the following div inside your document <strong><body></strong> and change the <strong>video url</strong> on the <strong>grtvideoplayer-url</strong> attribute.</p>
<code><div grtvideoplayer-url="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></div>
</code>
<p>4- Initialize the javascript after <strong>grt-js-video-player.js</strong> and before the closing <strong><body></strong> tag.</p>
<code><script>
grtVideoPlayer.init();
</script>
</code>
<h5>Advanced Options</h5>
<p><strong>All options available demo code:</strong></p>
<code><script>
grtVideoPlayer.init({
aspectRatio: "16x9", // Change video aspect ratio. Accepts values: 16x9, 1x1 , 4x3, 5x4, 3x2, 21x9, 9x16, 3x4, 4x5, 2x3. Default is 16x9.
controls: true, // Enable or disable controls. Accepts values true or false. Default is true.
clickToPlay: true,// Click on the whole video container to play/pause video. Accepts values true or false. Default is true.
autoPlay: false, // Enable or disable autoplay. Accepts values true or false. Default is false.
muted: false, // Enable or disable sound on video. Accepts values true or false. Default is false.
volume:90, // Set the volume level on video. It accepts values from 0 to 100. Default is set to 80.
fullScreenButton: true, // Enable or disable the FullScreen button on controls. It accepts values true or false. Default is set to true.
pipButton: true, // Enable or disable the PIP button on controls. It accepts values true or false. Default is set to true.
speedButton: true, // Enable or disable the Speed button on controls. It accepts values true or false. Default is set to true.
});
</script>
</code>
<p><strong>Aspect Ratio</strong> <br>You can change video aspect ratio. It accepts values: 16x9, 1x1 , 4x3, 5x4, 3x2, 21x9, 9x16, 3x4, 4x5, 2x3. Default is set to 16x9.</p>
<code><script>
grtVideoPlayer.init({
aspectRatio: "4x3",
});
</script>
</code>
<p><strong>Controls</strong> <br>You can change controls visibility. It accepts values true or false. Default is set to true.</p>
<code><script>
grtVideoPlayer.init({
controls: false,
});
</script>
</code>
<p><strong>Click To Play</strong> <br>You can click on the whole video container to play/pause video. It accepts values true or false. Default is set to true.</p>
<code><script>
grtVideoPlayer.init({
clickToPlay: false,
});
</script>
</code>
<p><strong>AutoPlay</strong> <br>You can enable or disable autoplay. It accepts values true or false. Default is set to false. In some devices and browsers (especially mobile), the autoplay will work only if the video is also muted.</p>
<code><script>
grtVideoPlayer.init({
autoPlay: true,
});
</script>
</code>
<p><strong>Muted</strong> <br>You can enable or disable sound on the video player. It accepts values true or false. Default is set to false.</p>
<code><script>
grtVideoPlayer.init({
muted: true,
});
</script>
</code>
<p><strong>Volume</strong> <br>You can set the volume level on video. It accepts values from 0 to 100. Default is set to 80.</p>
<code><script>
grtVideoPlayer.init({
volume: 75,
});
</script>
</code>
<p><strong>FullScreen Button</strong> <br>You can enable or disable the FullScreen button on controls. It accepts values true or false. Default is set to true.</p>
<code><script>
grtVideoPlayer.init({
fullScreenButton: false,
});
</script>
</code>
<p><strong>PIP Button</strong> <br>You can enable or disable the PIP button on controls. It accepts values true or false. Default is set to true.</p>
<code><script>
grtVideoPlayer.init({
pipButton: false,
});
</script>
</code>
<p><strong>Speed Button</strong> <br>You can enable or disable the Speed button on controls. It accepts values true or false. Default is set to true.</p>
<code><script>
grtVideoPlayer.init({
speedButton: false,
});
</script>
</code>
</div>
<!-- Github button for demo page -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- GRT JS Video Player -->
<script src="grt-js-video-player.js"></script>
<script>
grtVideoPlayer.init({
aspectRatio: "16x9", // Change video aspect ratio. Accepts values: 16x9, 1x1 , 4x3, 5x4, 3x2, 21x9, 9x16, 3x4, 4x5, 2x3. Default is 16x9.
controls: true, // Enable or disable controls. Accepts values true or false. Default is true.
clickToPlay: true,// Click on the whole video container to play/pause video. Accepts values true or false. Default is true.
autoPlay: false, // Enable or disable autoplay. Accepts values true or false. Default is false.
muted: false, // Enable or disable sound on video. Accepts values true or false. Default is false.
volume:90, // Set the volume level on video. It accepts values from 0 to 100. Default is set to 80.
fullScreenButton: true, // Enable or disable the FullScreen button on controls. It accepts values true or false. Default is set to true.
pipButton: true, // Enable or disable the PIP button on controls. It accepts values true or false. Default is set to true.
speedButton: true, // Enable or disable the Speed button on controls. It accepts values true or false. Default is set to true.
});
</script>
</body>
</html>