cloudinary-video-player 1.6.2-edge.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (226) hide show
  1. package/.eslintignore +4 -0
  2. package/.snyk +19 -0
  3. package/.travis.yml +8 -0
  4. package/CHANGELOG.md +329 -0
  5. package/LICENSE +21 -0
  6. package/README.md +87 -0
  7. package/dist/cld-video-player.css +2110 -0
  8. package/dist/cld-video-player.js +5249 -0
  9. package/dist/cld-video-player.light.css +1766 -0
  10. package/dist/cld-video-player.light.js +1399 -0
  11. package/dist/cld-video-player.light.min.css +1 -0
  12. package/dist/cld-video-player.light.min.js +2 -0
  13. package/dist/cld-video-player.light.min.js.LICENSE.txt +23 -0
  14. package/dist/cld-video-player.min.css +1 -0
  15. package/dist/cld-video-player.min.js +2 -0
  16. package/dist/cld-video-player.min.js.LICENSE.txt +26 -0
  17. package/dist/fonts/cloudinary_icon_for_black_bg.svg +69 -0
  18. package/dist/fonts/cloudinary_icon_for_white_bg.svg +69 -0
  19. package/docs/360.html +102 -0
  20. package/docs/_template.html +93 -0
  21. package/docs/adaptive-streaming.html +297 -0
  22. package/docs/analytics.html +140 -0
  23. package/docs/api.html +302 -0
  24. package/docs/audio.html +136 -0
  25. package/docs/autoplay-fallback.html +138 -0
  26. package/docs/autoplay-on-scroll.html +107 -0
  27. package/docs/codec-fallback.html +158 -0
  28. package/docs/colors.html +135 -0
  29. package/docs/components.html +284 -0
  30. package/docs/custom-cld-errors.html +134 -0
  31. package/docs/floating-player.html +98 -0
  32. package/docs/fluid.html +117 -0
  33. package/docs/force-hls-subtitles-ios.html +159 -0
  34. package/docs/index.html +83 -0
  35. package/docs/interaction-area.html +398 -0
  36. package/docs/live-customer.html +128 -0
  37. package/docs/multiple-players.html +125 -0
  38. package/docs/playlist-by-tag-cap.html +182 -0
  39. package/docs/playlist-by-tag.html +133 -0
  40. package/docs/playlist.html +133 -0
  41. package/docs/poster.html +155 -0
  42. package/docs/raw-url.html +104 -0
  43. package/docs/recommendations.html +155 -0
  44. package/docs/scripts.js +156 -0
  45. package/docs/seek-thumbs.html +90 -0
  46. package/docs/shoppable.html +335 -0
  47. package/docs/subtitles-and-captions.html +267 -0
  48. package/docs/transformations.html +171 -0
  49. package/docs/ui-config.html +108 -0
  50. package/docs/vast-vpaid.html +149 -0
  51. package/env.example.js +6 -0
  52. package/env.js +6 -0
  53. package/jest-puppeteer.config.js +14 -0
  54. package/jest.config.js +196 -0
  55. package/package.json +99 -0
  56. package/sandbox.config.json +3 -0
  57. package/setupJest.js +1 -0
  58. package/src/assets/fonts/VideoJS.svg +120 -0
  59. package/src/assets/fonts/VideoJS.ttf +0 -0
  60. package/src/assets/fonts/VideoJS.woff +0 -0
  61. package/src/assets/fonts/icons.json +120 -0
  62. package/src/assets/icons/cloudinary_icon_for_black_bg.svg +69 -0
  63. package/src/assets/icons/cloudinary_icon_for_white_bg.svg +69 -0
  64. package/src/assets/icons/cloudinary_logo_for_dark_bg.svg +188 -0
  65. package/src/assets/icons/cloudinary_logo_for_white_bg.svg +188 -0
  66. package/src/assets/icons/info-circle.svg +17 -0
  67. package/src/assets/styles/ads-label.scss +16 -0
  68. package/src/assets/styles/components/interaction-areas.scss +158 -0
  69. package/src/assets/styles/components/playlist.scss +213 -0
  70. package/src/assets/styles/components/themedButton.scss +48 -0
  71. package/src/assets/styles/components/thumbnail.scss +94 -0
  72. package/src/assets/styles/components/title-bar.scss +67 -0
  73. package/src/assets/styles/components/triangle-volume-bar.scss +52 -0
  74. package/src/assets/styles/icons.scss +257 -0
  75. package/src/assets/styles/main.scss +324 -0
  76. package/src/assets/styles/mixins/aspect-ratio.scss +16 -0
  77. package/src/assets/styles/mixins/disable-transition.scss +3 -0
  78. package/src/assets/styles/mixins/mixins.scss +5 -0
  79. package/src/assets/styles/mixins/skin.scss +64 -0
  80. package/src/assets/styles/variables.scss +2 -0
  81. package/src/assets/styles/videojs-ima.scss +252 -0
  82. package/src/components/component-utils.js +20 -0
  83. package/src/components/index.js +21 -0
  84. package/src/components/interaction-area/interaction-area.const.js +30 -0
  85. package/src/components/interaction-area/interaction-area.service.js +223 -0
  86. package/src/components/interaction-area/interaction-area.utils.js +236 -0
  87. package/src/components/jumpButtons/jump-10-minus.js +21 -0
  88. package/src/components/jumpButtons/jump-10-plus.js +20 -0
  89. package/src/components/logoButton/logo-button.const.js +3 -0
  90. package/src/components/logoButton/logo-button.js +30 -0
  91. package/src/components/logoButton/logo-button.scss +15 -0
  92. package/src/components/playlist/components/playlist-button.js +34 -0
  93. package/src/components/playlist/components/playlist-next-button.js +18 -0
  94. package/src/components/playlist/components/playlist-previous-button.js +18 -0
  95. package/src/components/playlist/components/playlist.js +5 -0
  96. package/src/components/playlist/components/playlist.scss +15 -0
  97. package/src/components/playlist/components/upcoming-video-overlay.js +149 -0
  98. package/src/components/playlist/components/upcoming-video-overlay.scss +86 -0
  99. package/src/components/playlist/layout/playlist-layout-custom.js +21 -0
  100. package/src/components/playlist/layout/playlist-layout-horizontal.js +16 -0
  101. package/src/components/playlist/layout/playlist-layout-vertical.js +19 -0
  102. package/src/components/playlist/layout/playlist-layout.js +110 -0
  103. package/src/components/playlist/panel/playlist-panel-item.js +86 -0
  104. package/src/components/playlist/panel/playlist-panel.js +92 -0
  105. package/src/components/playlist/playlist-widget.js +119 -0
  106. package/src/components/playlist/playlist.const.js +14 -0
  107. package/src/components/playlist/playlist.js +413 -0
  108. package/src/components/playlist/thumbnail/thumbnail.js +69 -0
  109. package/src/components/progress-control-events-blocker/progress-control-events-blocker.js +17 -0
  110. package/src/components/qualitySelector/quality-selector.scss +10 -0
  111. package/src/components/qualitySelector/qualitySelector.js +152 -0
  112. package/src/components/recommendations-overlay/index.js +3 -0
  113. package/src/components/recommendations-overlay/recommendations-overlay-content.js +57 -0
  114. package/src/components/recommendations-overlay/recommendations-overlay-hide-button.js +18 -0
  115. package/src/components/recommendations-overlay/recommendations-overlay-item.js +35 -0
  116. package/src/components/recommendations-overlay/recommendations-overlay-primary-item.js +81 -0
  117. package/src/components/recommendations-overlay/recommendations-overlay-secondary-item.js +48 -0
  118. package/src/components/recommendations-overlay/recommendations-overlay-secondary-items-container.js +35 -0
  119. package/src/components/recommendations-overlay/recommendations-overlay.js +94 -0
  120. package/src/components/recommendations-overlay/recommendations-overlay.scss +182 -0
  121. package/src/components/shoppable-bar/layout/bar-layout.js +111 -0
  122. package/src/components/shoppable-bar/layout/shoppable-panel-toggle.js +64 -0
  123. package/src/components/shoppable-bar/layout/shoppable-products-overlay.js +87 -0
  124. package/src/components/shoppable-bar/panel/shoppable-panel-item.js +105 -0
  125. package/src/components/shoppable-bar/panel/shoppable-panel.js +172 -0
  126. package/src/components/shoppable-bar/shoppable-post-widget.js +110 -0
  127. package/src/components/shoppable-bar/shoppable-widget.const.js +52 -0
  128. package/src/components/shoppable-bar/shoppable-widget.js +111 -0
  129. package/src/components/shoppable-bar/shoppable-widget.scss +359 -0
  130. package/src/components/themeButton/themedButton.const.js +3 -0
  131. package/src/components/themeButton/themedButton.js +25 -0
  132. package/src/components/title-bar/title-bar.js +79 -0
  133. package/src/config/defaults.js +25 -0
  134. package/src/extended-events.js +228 -0
  135. package/src/index.js +18 -0
  136. package/src/mixins/eventable.js +54 -0
  137. package/src/mixins/playlistable.js +106 -0
  138. package/src/plugins/analytics/index.js +245 -0
  139. package/src/plugins/autoplay-on-scroll/index.js +86 -0
  140. package/src/plugins/cloudinary/common.js +216 -0
  141. package/src/plugins/cloudinary/event-handler-registry.js +46 -0
  142. package/src/plugins/cloudinary/index.js +345 -0
  143. package/src/plugins/cloudinary/models/audio-source/audio-source.const.js +11 -0
  144. package/src/plugins/cloudinary/models/audio-source/audio-source.js +82 -0
  145. package/src/plugins/cloudinary/models/base-source.js +107 -0
  146. package/src/plugins/cloudinary/models/image-source.js +26 -0
  147. package/src/plugins/cloudinary/models/video-source/video-source.const.js +32 -0
  148. package/src/plugins/cloudinary/models/video-source/video-source.js +239 -0
  149. package/src/plugins/cloudinary/models/video-source/video-source.utils.js +57 -0
  150. package/src/plugins/colors/index.js +303 -0
  151. package/src/plugins/context-menu/components/context-menu-item.js +12 -0
  152. package/src/plugins/context-menu/components/context-menu.js +63 -0
  153. package/src/plugins/context-menu/context-menu.scss +30 -0
  154. package/src/plugins/context-menu/contextMenuContent.js +53 -0
  155. package/src/plugins/context-menu/index.js +134 -0
  156. package/src/plugins/dash/index.js +26 -0
  157. package/src/plugins/dash/setup-audio-tracks.js +112 -0
  158. package/src/plugins/dash/setup-text-tracks.js +195 -0
  159. package/src/plugins/dash/videojs-dash.js +372 -0
  160. package/src/plugins/floating-player/floating-player.scss +74 -0
  161. package/src/plugins/floating-player/index.js +129 -0
  162. package/src/plugins/ima/index.js +1775 -0
  163. package/src/plugins/index.js +31 -0
  164. package/src/plugins/interactive-plugin/index.js +10 -0
  165. package/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js +98 -0
  166. package/src/plugins/videojs-http-source-selector/components/SourceMenuItem.js +52 -0
  167. package/src/plugins/videojs-http-source-selector/plugin.js +82 -0
  168. package/src/plugins/videojs-http-source-selector/plugin.scss +9 -0
  169. package/src/plugins/vtt-thumbnails/index.js +526 -0
  170. package/src/plugins/vtt-thumbnails/vtt-thumbnails.scss +29 -0
  171. package/src/utils/api.js +32 -0
  172. package/src/utils/apply-with-props.js +32 -0
  173. package/src/utils/array.js +22 -0
  174. package/src/utils/assign.js +27 -0
  175. package/src/utils/attributes-normalizer.js +72 -0
  176. package/src/utils/cloudinary.js +165 -0
  177. package/src/utils/css-prefix.js +43 -0
  178. package/src/utils/dom.js +74 -0
  179. package/src/utils/find.js +28 -0
  180. package/src/utils/fontFace.js +25 -0
  181. package/src/utils/groupBy.js +12 -0
  182. package/src/utils/index.js +29 -0
  183. package/src/utils/matches.js +11 -0
  184. package/src/utils/mixin.js +5 -0
  185. package/src/utils/object.js +26 -0
  186. package/src/utils/playButton.js +9 -0
  187. package/src/utils/positioning.js +78 -0
  188. package/src/utils/querystring.js +12 -0
  189. package/src/utils/slicing.js +21 -0
  190. package/src/utils/string.js +15 -0
  191. package/src/utils/throttle.js +30 -0
  192. package/src/utils/time.js +77 -0
  193. package/src/utils/type-inference.js +35 -0
  194. package/src/validators/validators-functions.js +48 -0
  195. package/src/validators/validators-types.js +78 -0
  196. package/src/validators/validators.js +110 -0
  197. package/src/video-player.const.js +68 -0
  198. package/src/video-player.js +761 -0
  199. package/src/video-player.utils.js +123 -0
  200. package/test/adaptive-streaming.test.js +38 -0
  201. package/test/ads.test.js +35 -0
  202. package/test/analytics.test.js +111 -0
  203. package/test/api.test.js +111 -0
  204. package/test/autoplay.scroll.test.js +23 -0
  205. package/test/basic-ui.test.js +59 -0
  206. package/test/colors.test.js +58 -0
  207. package/test/components.test.js +21 -0
  208. package/test/custom-error.test.js +24 -0
  209. package/test/fluid.test.js +36 -0
  210. package/test/isValidConfig.test.js +224 -0
  211. package/test/mocks/cloudinary-core-mock.js +0 -0
  212. package/test/mocks/styleMock.js +1 -0
  213. package/test/multiplayer.test.js +25 -0
  214. package/test/playlist.test.js +60 -0
  215. package/test/puppeteer/vp-env.js +19 -0
  216. package/test/recommendations.test.js +38 -0
  217. package/test/title-bar.test.js +28 -0
  218. package/test/ui-conf.test.js +49 -0
  219. package/test/unit/cloudinaryConfig.test.js +22 -0
  220. package/test/unit/cloudinaryUtils.test.js +53 -0
  221. package/test/unit/utils.test.js +27 -0
  222. package/test/unit/videoSource.test.js +454 -0
  223. package/tsconfig.json +15 -0
  224. package/types/video-player-tests.js +12 -0
  225. package/types/video-player-tests.ts +31 -0
  226. package/types/video-player.d.ts +570 -0
package/docs/components.html ADDED
@@ -0,0 +1,284 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Cloudinary Video Player</title>
6
+ <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7
+
8
+ <!-- Bootstrap -->
9
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
+
11
+ <!-- highlight.js -->
12
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14
+ <script>hljs.initHighlightingOnLoad();</script>
15
+
16
+ <!--
17
+ We're loading scripts & style dynamically for development/testing.
18
+ Real-world usage would look like this:
19
+
20
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
21
+
22
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
23
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
24
+ -->
25
+
26
+ <script type="text/javascript" src="./scripts.js"></script>
27
+
28
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
29
+
30
+ <style type="text/css">
31
+ .vjs-control.vjs-playlist-control:before {
32
+ font-family: FontAwesome;
33
+ font-size: 1.5em;
34
+ line-height: 2.0;
35
+ }
36
+
37
+ .vjs-playlist-control.vjs-playlist-next-control:before {
38
+ content: "\f050";
39
+ }
40
+ .vjs-playlist-control.vjs-playlist-previous-control:before {
41
+ content: "\f049";
42
+ }
43
+ </style>
44
+
45
+ <script type="text/javascript">
46
+ window.addEventListener('load', function(){
47
+ // Code for creating the VideoJS components
48
+ // ===============================================
49
+
50
+ // Get the ClickableComponent base class from Video.js
51
+ let vjs = videojs.default ? videojs.default : videojs;
52
+ var ClickableComponent = vjs.getComponent('ClickableComponent');
53
+
54
+ // Create a common class for playlist buttons
55
+ var PlaylistButton = vjs.extend(ClickableComponent, {
56
+ constructor: function(player, options) {
57
+ var type = options.type;
58
+ if (!type && type !== 'previous' && type !== 'next') {
59
+ throw new Error("Playlist must be either 'previous' or 'next'");
60
+ }
61
+
62
+ this.type = type;
63
+
64
+ // It is important to invoke the superclass before anything else,
65
+ // to get all the features of components out of the box!
66
+ ClickableComponent.apply(this, arguments);
67
+ },
68
+
69
+ // The `createEl` function of a component creates its DOM element.
70
+ createEl: function() {
71
+ var typeCssClass = 'vjs-playlist-' + this.type + '-control';
72
+
73
+ return vjs.createEl('button', {
74
+
75
+ // Prefixing classes of elements within a player with "vjs-"
76
+ // is a convention used in Video.js.
77
+ className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
78
+ });
79
+ },
80
+ });
81
+
82
+ // Create the NextButton component
83
+ var NextButton = vjs.extend(PlaylistButton, {
84
+ constructor: function(player, options) {
85
+ PlaylistButton.apply(this, [player, { type: 'next' }]);
86
+ },
87
+
88
+ handleClick: function() {
89
+ PlaylistButton.prototype.handleClick.call(this);
90
+
91
+ // Since the component has a VideoJS Player object, we use the internal
92
+ // Cloudinary plugin to reach to the playlist object.
93
+ this.player().cloudinary.playlist().playNext();
94
+ }
95
+ });
96
+
97
+ // Create the PreviousButton component
98
+ var PreviousButton = vjs.extend(PlaylistButton, {
99
+ constructor: function(player, options) {
100
+ PlaylistButton.apply(this, [player, { type: 'previous' }]);
101
+ },
102
+
103
+ handleClick: function() {
104
+ PlaylistButton.prototype.handleClick.call(this);
105
+ this.player().cloudinary.playlist().playPrevious();
106
+ }
107
+ });
108
+
109
+ // Register the component with Video.js, so it can be used in players.
110
+ vjs.registerComponent('NextButton', NextButton);
111
+ vjs.registerComponent('PreviousButton', PreviousButton);
112
+
113
+ // Cloudinary Video Player related code
114
+ // ====================================
115
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
116
+
117
+ // Initialize player with only the controlBar's 'playToggle' and our
118
+ // custom components set.
119
+ var player = cld.videoPlayer('player', {
120
+ videojs: {
121
+ controlBar: { children: ['PreviousButton', 'playToggle', 'NextButton'] }
122
+ }
123
+ });
124
+
125
+ player.playlist([
126
+ { publicId: 'elephants' },
127
+ 'sea_turtle'], { autoAdvance: 0, repeat: true });
128
+
129
+ }, false);
130
+ </script>
131
+
132
+ </head>
133
+ <body>
134
+
135
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
136
+ <nav class="nav mb-2">
137
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
138
+ </nav>
139
+ <h1>Cloudinary Video Player</h1>
140
+ <h3 class="mb-4">Components</h3>
141
+
142
+ <video
143
+ id="player"
144
+ playsinline
145
+ controls
146
+ muted
147
+ autoplay
148
+ class="cld-video-player"
149
+ width="500">
150
+ </video>
151
+
152
+ <p class="mt-4">
153
+ <a href="https://github.com/videojs/video.js/blob/master/docs/guides/components.md">Read more about VideoJS components</a>
154
+ </p>
155
+
156
+ <h3 class="mt-4">Example Code:</h3>
157
+ <pre>
158
+ <code class="language-css">
159
+
160
+ &lt;!-- We used FontAwesome for the 'Previous' and 'Next' controlBar buttons --&gt;
161
+ &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
162
+
163
+ &lt;!-- Add required CSS for displaying the fonts --&gt;
164
+ &lt;style type="text/css"&gt;
165
+ .vjs-control.vjs-playlist-control:before {
166
+ font-family: FontAwesome;
167
+ font-size: 1.5em;
168
+ line-height: 2.0;
169
+ }
170
+
171
+ .vjs-playlist-control.vjs-playlist-next-control:before {
172
+ content: "\f050";
173
+ }
174
+ .vjs-playlist-control.vjs-playlist-previous-control:before {
175
+ content: "\f049";
176
+ }
177
+ &lt;/style&gt;
178
+ </code>
179
+ <code class="language-html">
180
+ &lt;video
181
+ id="player"
182
+ controls
183
+ muted
184
+ autoplay
185
+ class="cld-video-player"
186
+ width="500"&gt;
187
+ &lt;/video&gt;
188
+
189
+ &lt;div id="source-data"&gt;
190
+ &lt;span id="public-id-placeholder"&gt;&lt;/span&gt;&lt;br&gt;
191
+ &lt;span id="source-url-placeholder"&gt;&lt;/span&gt;
192
+ &lt;/div&gt;
193
+
194
+ </code>
195
+
196
+ <code class="language-javascript">
197
+
198
+ // Code for creating the VideoJS components
199
+ // ===============================================
200
+
201
+ // Get the ClickableComponent base class from Video.js
202
+ var ClickableComponent = videojs.default.getComponent('ClickableComponent');
203
+
204
+ // Create a common class for playlist buttons
205
+ var PlaylistButton = videojs.default.extend(ClickableComponent, {
206
+ constructor: function(player, options) {
207
+ var type = options.type;
208
+ if (!type && type != 'previous' && type != 'next') {
209
+ throw new Error("Playlist must be either 'previous' or 'next'");
210
+ }
211
+
212
+ this.type = type;
213
+
214
+ // It is important to invoke the superclass before anything else,
215
+ // to get all the features of components out of the box!
216
+ ClickableComponent.apply(this, arguments);
217
+ },
218
+
219
+ // The `createEl` function of a component creates its DOM element.
220
+ createEl: function() {
221
+ var typeCssClass = 'vjs-playlist-' + this.type + '-control';
222
+
223
+ return videojs.default.createEl('button', {
224
+
225
+ // Prefixing classes of elements within a player with "vjs-"
226
+ // is a convention used in Video.js.
227
+ className: 'vjs-control vjs-playlist-control vjs-button ' + typeCssClass
228
+ });
229
+ },
230
+ });
231
+
232
+ // Create the NextButton component
233
+ var NextButton = videojs.default.extend(PlaylistButton, {
234
+ constructor: function(player, options) {
235
+ PlaylistButton.apply(this, [player, { type: 'next' }]);
236
+ },
237
+
238
+ handleClick: function() {
239
+ PlaylistButton.prototype.handleClick.call(this);
240
+
241
+ // Since the component has a VideoJS Player object, we use the internal
242
+ // Cloudinary plugin to reach to the playlist object.
243
+ this.player().cloudinary.playlist().playNext();
244
+ }
245
+ });
246
+
247
+ // Create the PreviousButton component
248
+ var PreviousButton = videojs.default.extend(PlaylistButton, {
249
+ constructor: function(player, options) {
250
+ PlaylistButton.apply(this, [player, { type: 'previous' }]);
251
+ },
252
+
253
+ handleClick: function() {
254
+ PlaylistButton.prototype.handleClick.call(this);
255
+ this.player().cloudinary.playlist().playPrevious();
256
+ }
257
+ });
258
+
259
+ // Register the component with Video.js, so it can be used in players.
260
+ videojs.default.registerComponent('NextButton', NextButton);
261
+ videojs.default.registerComponent('PreviousButton', PreviousButton);
262
+
263
+ // Cloudinary Video Player related code
264
+ // ====================================
265
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
266
+
267
+ // Initialize player with only the controlBar's 'playToggle' and our
268
+ // custom components set.
269
+ var player = cld.videoPlayer('player', {
270
+ videojs: {
271
+ controlBar: { children: ['PreviousButton', 'playToggle', 'NextButton'] }
272
+ }
273
+ });
274
+
275
+ player.playlist([
276
+ { publicId: 'elephants' },
277
+ 'sea_turtle'], { autoAdvance: 0, repeat: true });
278
+
279
+ </code>
280
+ </pre>
281
+ </div>
282
+
283
+ </body>
284
+ </html>
package/docs/custom-cld-errors.html ADDED
@@ -0,0 +1,134 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Cloudinary Video Player</title>
6
+ <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7
+
8
+ <!-- Bootstrap -->
9
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
+
11
+ <!-- highlight.js -->
12
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14
+ <script>hljs.initHighlightingOnLoad();</script>
15
+
16
+ <!--
17
+ We're loading scripts & style dynamically for development/testing.
18
+ Real-world usage would look like this:
19
+
20
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
21
+
22
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
23
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
24
+
25
+ -->
26
+
27
+ <script type="text/javascript" src="./scripts.js"></script>
28
+
29
+ <script type="text/javascript">
30
+ window.addEventListener('load', function(){
31
+
32
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo_err' });
33
+
34
+ player = cld.videoPlayer('player', {
35
+ publicId: 'snow_horses'
36
+ });
37
+
38
+ // Add a custom error handler on 'error' event
39
+ player.on('error', function(e) {
40
+ const error = e.Player.videojs.error(); // Get current error
41
+
42
+ // Custom error code should be > 99, smaller values might already be used by the player.
43
+ const customErrorCode = 999;
44
+
45
+ // Replace current error message with your custom error message
46
+ if (error && error.code !== customErrorCode) {
47
+ errorContainerText = 'Error:' + error.statusCode + ',' + error.message;
48
+
49
+ // Set text under the video player
50
+ let errorContainer = document.querySelector('.error-container');
51
+ errorContainer.innerHTML = errorContainerText;
52
+ errorContainer.style.color = 'red';
53
+
54
+ // Set video player custom error message
55
+ player.videojs.error(null); // Stop default error handling
56
+ player.videojs.error({code: customErrorCode, message: "My custom error message"}); // Set error
57
+ }
58
+ });
59
+
60
+ }, false);
61
+ </script>
62
+
63
+ </head>
64
+ <body>
65
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
66
+ <nav class="nav mb-2">
67
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
68
+ </nav>
69
+ <h1>Cloudinary Video Player</h1>
70
+ <h3 class="mb-4">Custom Errors</h3>
71
+
72
+ <video
73
+ id="player"
74
+ playsinline
75
+ controls
76
+ muted
77
+ autoplay
78
+ class="cld-video-player"
79
+ width="500"
80
+ ></video>
81
+
82
+ <div class="error-container"></div>
83
+
84
+ <p class="mt-4">
85
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
86
+ </p>
87
+
88
+ <h3 class="mt-4">Example Code:</h3>
89
+ <pre>
90
+ <code class="language-html">
91
+ &lt;video
92
+ id="player"
93
+ controls
94
+ muted
95
+ autoplay
96
+ class="cld-video-player"
97
+ width="500"
98
+ &gt;&lt;/video&gt;
99
+ &lt;div class="error-container"&gt;&lt;/div&gt;
100
+ </code>
101
+ <code class="language-javascript">
102
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo_err' });
103
+
104
+ player = cld.videoPlayer('player', {
105
+ publicId: 'snow_horses',
106
+ });
107
+
108
+ // Add a custom error handler on 'error' event
109
+ player.on('error', (e) => {
110
+ const error = e.Player.videojs.error(); // Get current error
111
+
112
+ // Custom error code should be > 99, smaller values might already be used by the player.
113
+ const customErrorCode = 999;
114
+
115
+ // Replace current error message with your custom error message
116
+ if (error && error.code !== customErrorCode) {
117
+ errorContainerText = `Error: ${error.statusCode}, ${error.message}`;
118
+
119
+ // Set text under the video player
120
+ let errorContainer = document.querySelector('.error-container');
121
+ errorContainer.innerHTML = errorContainerText;
122
+ errorContainer.style.color = 'red';
123
+
124
+ // Set video player custom error message
125
+ player.videojs.error(null); // Stop default error handling
126
+ player.videojs.error({code: customErrorCode, message: "My custom error message"}); // Set error
127
+ }
128
+ });
129
+ </code>
130
+ </pre>
131
+ </div>
132
+
133
+ </body>
134
+ </html>
package/docs/floating-player.html ADDED
@@ -0,0 +1,98 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Cloudinary Video Player</title>
6
+ <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7
+
8
+ <!-- Bootstrap -->
9
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
+
11
+ <!-- highlight.js -->
12
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14
+ <script>hljs.initHighlightingOnLoad();</script>
15
+
16
+ <!--
17
+ We're loading scripts & style dynamically for development/testing.
18
+ Real-world usage would look like this:
19
+
20
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
21
+
22
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
23
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
24
+ -->
25
+
26
+ <script type="text/javascript" src="./scripts.js"></script>
27
+
28
+ <script type="text/javascript">
29
+ window.addEventListener('load', function(){
30
+
31
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
32
+
33
+ var player = cld.videoPlayer('player', {
34
+ floatingWhenNotVisible: 'right' // or 'left'
35
+ });
36
+
37
+ player.source("snow_deer");
38
+
39
+ }, false);
40
+ </script>
41
+
42
+ </head>
43
+ <body>
44
+
45
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
46
+ <nav class="nav mb-2">
47
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
48
+ </nav>
49
+ <h1>Cloudinary Video Player</h1>
50
+ <h3 class="mb-4">Floating player</h3>
51
+
52
+ <video
53
+ id="player"
54
+ playsinline
55
+ controls
56
+ autoplay
57
+ class="cld-video-player"
58
+ width="500">
59
+ </video>
60
+
61
+ <p class="mt-4">
62
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation (needs anchor)</a>
63
+ </p>
64
+
65
+ <h3 class="mt-4">Example Code:</h3>
66
+
67
+ <pre>
68
+ <code class="language-html">
69
+
70
+ &lt;video
71
+ id="player"
72
+ controls
73
+ autoplay
74
+ class="cld-video-player"
75
+ width="500"&gt;
76
+ &lt;/video&gt;
77
+ </code>
78
+ </pre>
79
+
80
+ <pre>
81
+ <code class="language-javascript">
82
+
83
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
84
+
85
+ var player = cld.videoPlayer('player', {
86
+ floatingWhenNotVisible: 'right' // or 'left'
87
+ });
88
+
89
+ player.source("snow_deer");
90
+ </code>
91
+ </pre>
92
+
93
+ </div>
94
+
95
+ <p class="container col-10 col-md-6 col-lg-4 col-xl-3"><b>Some text to allow scrolling</b> - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.</p>
96
+
97
+ </body>
98
+ </html>
package/docs/fluid.html ADDED
@@ -0,0 +1,117 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Cloudinary Video Player</title>
6
+ <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7
+
8
+ <!-- Bootstrap -->
9
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
+
11
+ <!-- highlight.js -->
12
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14
+ <script>hljs.initHighlightingOnLoad();</script>
15
+
16
+ <!--
17
+ We're loading scripts & style dynamically for development/testing.
18
+ Real-world usage would look like this:
19
+
20
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
21
+
22
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
23
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
24
+
25
+ -->
26
+
27
+ <script type="text/javascript" src="./scripts.js"></script>
28
+
29
+ <script type="text/javascript">
30
+ window.addEventListener('load', function(){
31
+
32
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
33
+
34
+ var player = cld.videoPlayer('player');
35
+
36
+ var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };
37
+
38
+ player.source(source).play();
39
+
40
+ document.querySelector("button#toggle-fluid").addEventListener("click", function() {
41
+ isFluid = !player.fluid()
42
+ player.fluid(isFluid);
43
+
44
+ this.innerHTML = isFluid ? 'Disable Fluid' : 'Enable Fluid'
45
+ });
46
+
47
+ }, false);
48
+ </script>
49
+
50
+ </head>
51
+ <body>
52
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
53
+ <nav class="nav mb-2">
54
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
55
+ </nav>
56
+ <h1>Cloudinary Video Player</h1>
57
+ <h3 class="mb-4">Fluid Layouts</h3>
58
+
59
+ <video
60
+ id="player"
61
+ playsinline
62
+ controls
63
+ muted
64
+ autoplay
65
+ class="cld-video-player cld-fluid"
66
+ width="500"
67
+ ></video>
68
+
69
+ <button id="toggle-fluid" class="btn btn-lg btn-primary mt-2">Disable Fluid</button>
70
+
71
+ <p class="mt-4">
72
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
73
+ </p>
74
+
75
+ <h3 class="mt-4">Example Code:</h3>
76
+ <pre>
77
+ <code class="language-html">
78
+
79
+ &lt;video
80
+ id="player"
81
+ controls
82
+ muted
83
+ autoplay
84
+ class="cld-video-player cld-fluid"
85
+ width="500"&gt;
86
+ &lt;/video&gt;
87
+
88
+ &lt;button id="toggle-fluid" class="btn btn-default"&gt;Disable Fluid&lt;/button&gt;
89
+
90
+ </code>
91
+ <code class="language-javascript">
92
+
93
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
94
+
95
+ // Initialize player
96
+ var player = cld.videoPlayer('player');
97
+
98
+ // Define source
99
+ var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };
100
+
101
+ // Play source
102
+ player.source(source).play();
103
+
104
+ // Handle Fluid toggle button
105
+ document.querySelector("button#toggle-fluid").addEventListener("click", function() {
106
+ isFluid = !player.fluid()
107
+ player.fluid(isFluid);
108
+
109
+ this.innerHTML = isFluid ? 'Disable Fluid' : 'Enable Fluid'
110
+ });
111
+
112
+ </code>
113
+ </pre>
114
+ </div>
115
+
116
+ </body>
117
+ </html>