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/subtitles-and-captions.html ADDED
@@ -0,0 +1,267 @@
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: 'yaronr' });
33
+
34
+ var player = cld.videoPlayer('player');
35
+
36
+ player.source(
37
+ 'stubhub',
38
+ {
39
+ textTracks: {
40
+ captions: {
41
+ label: 'English captions',
42
+ language: 'en',
43
+ default: true,
44
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
45
+ },
46
+ subtitles: [
47
+ {
48
+ label: 'German subtitles',
49
+ language: 'de',
50
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
51
+ },
52
+ {
53
+ label: 'Russian subtitles',
54
+ language: 'ru',
55
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
56
+ },{
57
+ label: 'Hebrew subtitles',
58
+ language: 'he',
59
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_heb.vtt.mv'
60
+ }
61
+ ]
62
+ }
63
+ }
64
+ );
65
+
66
+ // Playlist
67
+ var playlist = cld.videoPlayer('playlist');
68
+
69
+ var source1 = {
70
+ publicId: 'stubhub',
71
+ info: { title: 'Subtitles & Captions playlist' },
72
+ textTracks: {
73
+ captions: {
74
+ label: 'English captions',
75
+ language: 'en',
76
+ default: true,
77
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
78
+ },
79
+ subtitles: [
80
+ {
81
+ label: 'German subtitles',
82
+ language: 'de',
83
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
84
+ },
85
+ {
86
+ label: 'Russian subtitles',
87
+ language: 'ru',
88
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
89
+ }
90
+ ]
91
+ }
92
+ };
93
+ var source2 = {
94
+ publicId: 'outdoors',
95
+ info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' },
96
+ textTracks: {
97
+ captions: {
98
+ label: 'English captions',
99
+ language: 'en',
100
+ default: true,
101
+ url: 'https://res.cloudinary.com/demo/raw/upload/outdoors.vtt',
102
+ }
103
+ }
104
+ };
105
+ var source3 = {
106
+ publicId: 'dog',
107
+ info: { title: 'Dog', subtitle: 'Video of a dog, no captions' }
108
+ };
109
+
110
+ var playlistSources = [source1, source2, source3];
111
+ var playlistOptions = {
112
+ autoAdvance: true,
113
+ repeat: true,
114
+ presentUpcoming: 8
115
+ };
116
+ playlist.playlist(playlistSources, playlistOptions);
117
+
118
+ }, false);
119
+ </script>
120
+
121
+ </head>
122
+ <body>
123
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
124
+ <nav class="nav mb-2">
125
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
126
+ </nav>
127
+ <h1>Cloudinary Video Player</h1>
128
+ <h3 class="mb-4">Subtitles & Captions</h3>
129
+
130
+ <video
131
+ id="player"
132
+ playsinline
133
+ controls
134
+ muted
135
+ autoplay
136
+ class="cld-video-player cld-fluid"
137
+ crossorigin="anonymous"
138
+ width="500">
139
+ </video>
140
+
141
+ <h4 class="mt-4 mb-2">Playlist Subtitles (switch per source)</h4>
142
+
143
+ <video
144
+ id="playlist"
145
+ playsinline
146
+ controls
147
+ muted
148
+ class="cld-video-player cld-fluid"
149
+ crossorigin="anonymous"
150
+ width="500">
151
+ </video>
152
+
153
+ <p class="mt-4">
154
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
155
+ </p>
156
+
157
+ <h3 class="mt-4">Example Code:</h3>
158
+ <pre>
159
+ <code class="language-html">
160
+ &lt;video
161
+ id="player"
162
+ controls
163
+ muted
164
+ autoplay
165
+ class="cld-video-player"
166
+ crossorigin="anonymous"
167
+ width="500">
168
+ &lt;/video&gt;
169
+
170
+ &lt;video
171
+ id="playlist"
172
+ controls
173
+ muted
174
+ class="cld-video-player"
175
+ crossorigin="anonymous"
176
+ width="500"&gt;
177
+ &lt;/video&gt;
178
+ </code>
179
+ <code class="language-javascript">
180
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
181
+
182
+ // Initialize player
183
+ var player = cld.videoPlayer('player');
184
+
185
+ player.source(
186
+ 'stubhub',
187
+ {
188
+ textTracks: {
189
+ captions: {
190
+ label: 'English captions',
191
+ language: 'en',
192
+ default: true,
193
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
194
+ },
195
+ subtitles: [
196
+ {
197
+ label: 'German subtitles',
198
+ language: 'de',
199
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
200
+ },
201
+ {
202
+ label: 'Russian subtitles',
203
+ language: 'ru',
204
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
205
+ }
206
+ ]
207
+ }
208
+ }
209
+ );
210
+
211
+ // Playlist
212
+ var playlist = cld.videoPlayer('playlist');
213
+
214
+ var source1 = {
215
+ publicId: 'stubhub',
216
+ info: { title: 'Subtitles & Captions playlist' },
217
+ textTracks: {
218
+ captions: {
219
+ label: 'English captions',
220
+ language: 'en',
221
+ default: true,
222
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt'
223
+ },
224
+ subtitles: [
225
+ {
226
+ label: 'German subtitles',
227
+ language: 'de',
228
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt'
229
+ },
230
+ {
231
+ label: 'Russian subtitles',
232
+ language: 'ru',
233
+ url: 'https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt'
234
+ }
235
+ ]
236
+ }
237
+ };
238
+ var source2 = {
239
+ publicId: 'outdoors',
240
+ info: { title: 'Outdoors', subtitle: 'Outdoors movie with captions' },
241
+ textTracks: {
242
+ captions: {
243
+ label: 'English captions',
244
+ language: 'en',
245
+ default: true,
246
+ url: 'https://res.cloudinary.com/demo/raw/upload/outdoors.vtt',
247
+ }
248
+ }
249
+ };
250
+ var source3 = {
251
+ publicId: 'dog',
252
+ info: { title: 'Dog', subtitle: 'Video of a dog, no captions' }
253
+ };
254
+
255
+ var playlistSources = [source1, source2, source3];
256
+ var playlistOptions = {
257
+ autoAdvance: true,
258
+ repeat: true,
259
+ presentUpcoming: 8
260
+ };
261
+ playlist.playlist(playlistSources, playlistOptions);
262
+ </code>
263
+ </pre>
264
+ </div>
265
+
266
+ </body>
267
+ </html>
package/docs/transformations.html ADDED
@@ -0,0 +1,171 @@
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-1');
35
+
36
+ player.source({
37
+ publicId: 'snow_horses',
38
+ info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
39
+ transformation: [
40
+ { width: 400, crop: 'limit' },
41
+ { effect: 'blur:500' },
42
+ { effect: 'saturation:-100' },
43
+ ],
44
+ });
45
+
46
+ cld.videoPlayer('player-2', {
47
+ transformation: [
48
+ { width: 400, crop: 'limit' },
49
+ { effect: 'blur:500' },
50
+ { effect: 'saturation:-100' },
51
+ ],
52
+ });
53
+
54
+ cld.videoPlayer('player-3');
55
+
56
+ }, false);
57
+ </script>
58
+
59
+ </head>
60
+ <body>
61
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
62
+ <nav class="nav mb-2">
63
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
64
+ </nav>
65
+ <h1>Cloudinary Video Player</h1>
66
+ <h3 class="mb-4">Transformations Arrays</h3>
67
+
68
+ <h4 class="mb-2">via source()</h4>
69
+ <video
70
+ id="player-1"
71
+ playsinline
72
+ controls
73
+ muted
74
+ autoplay
75
+ class="cld-video-player">
76
+ </video>
77
+
78
+ <h4 class="mt-4 mb-2">via player()</h4>
79
+ <video
80
+ id="player-2"
81
+ playsinline
82
+ controls
83
+ muted
84
+ autoplay
85
+ class="cld-video-player"
86
+ data-cld-source='{ "publicId": "dog", "info": { "title": "Dog", "subtitle": "Short movie about a dog" } }'>
87
+ </video>
88
+
89
+ <h4 class="mt-4 mb-2">via data-cld-transformation</h4>
90
+ <video
91
+ id="player-3"
92
+ playsinline
93
+ controls
94
+ muted
95
+ autoplay
96
+ class="cld-video-player"
97
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
98
+ data-cld-transformation='[{ "width": "400", "crop": "limit" },{ "effect": "blur:500" },{ "effect": "saturation:-100" }]'>
99
+ </video>
100
+
101
+ <p class="mt-4">
102
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
103
+ </p>
104
+
105
+ <h3 class="mt-4">Example Code:</h3>
106
+ <pre>
107
+ <code class="language-html">
108
+
109
+ &lt;video
110
+ id="player-1"
111
+ playsinline
112
+ controls
113
+ muted
114
+ autoplay
115
+ class="cld-video-player">
116
+ &lt;/video&gt;
117
+
118
+ &lt;video
119
+ id="player-2"
120
+ playsinline
121
+ controls
122
+ muted
123
+ autoplay
124
+ class="cld-video-player"
125
+ data-cld-source='{ "publicId": "dog", "info": { "title": "Dog", "subtitle": "Short movie about a dog" } }'>
126
+ /video&gt;
127
+
128
+ &lt;video
129
+ id="player-3"
130
+ playsinline
131
+ controls
132
+ muted
133
+ autoplay
134
+ class="cld-video-player"
135
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
136
+ data-cld-transformation='[{ "width": "400", "crop": "limit" },{ "effect": "blur:500" },{ "effect": "saturation:-100" }]'>
137
+ &lt;/video&gt;
138
+
139
+ </code>
140
+ <code class="language-javascript">
141
+
142
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
143
+
144
+ var player = cld.videoPlayer('player-1');
145
+
146
+ player.source({
147
+ publicId: 'snow_horses',
148
+ info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
149
+ transformation: [
150
+ { width: 400, crop: 'limit' },
151
+ { effect: 'blur:500' },
152
+ { effect: 'saturation:-100' },
153
+ ],
154
+ });
155
+
156
+ var player2 = cld.videoPlayer('player-2', {
157
+ transformation: [
158
+ { width: 400, crop: 'limit' },
159
+ { effect: 'blur:500' },
160
+ { effect: 'saturation:-100' },
161
+ ],
162
+ });
163
+
164
+ var player3 = cld.videoPlayer('player-3');
165
+
166
+ </code>
167
+ </pre>
168
+ </div>
169
+
170
+ </body>
171
+ </html>
package/docs/ui-config.html ADDED
@@ -0,0 +1,108 @@
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
+ player = cld.videoPlayer('player', {
35
+ publicId: 'snow_horses',
36
+ info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
37
+ hideContextMenu: true,
38
+ logoImageUrl: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Facebook_Like_React.png',
39
+ logoOnclickUrl: 'https://google.com',
40
+ showLogo: true,
41
+ showJumpControls: true,
42
+ });
43
+
44
+ }, false);
45
+ </script>
46
+
47
+ </head>
48
+ <body>
49
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
50
+ <nav class="nav mb-2">
51
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
52
+ </nav>
53
+ <h1>Cloudinary Video Player</h1>
54
+ <h3 class="mb-4">Display Configurations</h3>
55
+ <p>
56
+ This page demonstrates:
57
+ <ul>
58
+ <li>Custom Logo</li>
59
+ <li>Hide Context Menu</li>
60
+ <li>Display 10-sec jump buttons</li>
61
+ </ul>
62
+ </p>
63
+
64
+ <video
65
+ id="player"
66
+ playsinline
67
+ controls
68
+ muted
69
+ autoplay
70
+ class="cld-video-player"
71
+ width="500">
72
+ </video>
73
+
74
+ <p class="mt-4">
75
+ <a href="https://cloudinary.com/documentation/video_player_customization#configuration_options">Full documentation</a>
76
+ </p>
77
+
78
+ <h3 class="mt-4">Example Code:</h3>
79
+ <pre>
80
+ <code class="language-html">
81
+ &lt;video
82
+ id="player"
83
+ playsinline
84
+ controls
85
+ muted
86
+ autoplay
87
+ class="cld-video-player"
88
+ width="500"&gt;
89
+ &lt;/video&gt;
90
+ </code>
91
+ <code class="language-javascript">
92
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
93
+
94
+ var player = cld.videoPlayer('player', {
95
+ publicId: 'snow_horses',
96
+ info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
97
+ hideContextMenu: true,
98
+ logoImageUrl: 'https://upload.wikimedia.org/wikipedia/commons/3/38/Facebook_Like_React.png',
99
+ logoOnclickUrl: 'https://google.com',
100
+ showLogo: true,
101
+ showJumpControls: true,
102
+ });
103
+ </code>
104
+ </pre>
105
+ </div>
106
+
107
+ </body>
108
+ </html>
package/docs/vast-vpaid.html ADDED
@@ -0,0 +1,149 @@
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
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.1.5/videojs.ads.css" />
30
+ <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
31
+
32
+ <script type="text/javascript">
33
+ window.addEventListener('load', function(){
34
+
35
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
36
+
37
+ var adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator=";
38
+
39
+ player = cld.videoPlayer('player', {
40
+ ads: {
41
+ adTagUrl: adTagUrl,
42
+ }
43
+ });
44
+
45
+ var sorter = function(a, b) {
46
+ if (a.publicId < b.publicId) return 1;
47
+ if (a.publicId > b.publicId) return -1;
48
+ return 0;
49
+ };
50
+
51
+ player.playlistByTag('video_race', {
52
+ sorter: sorter,
53
+ autoAdvance: 5,
54
+ repeat: true,
55
+ presentUpcoming: false
56
+ }).then(function(player) {
57
+ var divElem = document.querySelector("div#playlist-data");
58
+ var list = player.playlist().list().map(function(source) {
59
+ return source.publicId()
60
+ }).join(', ');
61
+
62
+ divElem.innerText = "Playlist: " + list
63
+ });
64
+
65
+ }, false);
66
+ </script>
67
+
68
+ </head>
69
+ <body>
70
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
71
+ <nav class="nav mb-2">
72
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
73
+ </nav>
74
+ <h1>Cloudinary Video Player</h1>
75
+ <h3 class="mb-4">VAST and VPAID</h3>
76
+
77
+ <video
78
+ id="player"
79
+ playsinline
80
+ controls
81
+ muted
82
+ autoplay
83
+ class="cld-video-player"
84
+ width="500"
85
+ ></video>
86
+
87
+ <p class="mt-4">
88
+ <a href="https://cloudinary.com/documentation/video_player_ads_monetization">Ads and monetization documentation</a>
89
+ </p>
90
+
91
+ <h3 class="mt-4">Example Code:</h3>
92
+ <pre>
93
+ <code class="language-html">
94
+
95
+ &lt;video
96
+ id="player"
97
+ controls
98
+ muted
99
+ autoplay
100
+ class="cld-video-player"
101
+ width="500"&gt;
102
+ &lt;/video&gt;
103
+
104
+ </code>
105
+ <code class="language-javascript">
106
+
107
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
108
+
109
+ // Initialize player
110
+ var player = cld.videoPlayer('player', {
111
+ plugins: {
112
+ vastClient: {
113
+ adTagUrl: "https://rtr.innovid.com/r1.5554946ab01d97.36996823;cb={random_number}",
114
+ adCancelTimeout: 5000,
115
+ adsEnabled: true,
116
+ playAdAlways: true
117
+ }
118
+ }
119
+ });
120
+
121
+ // Pass a sorter to sort list in alphabetical order by publicId
122
+ var sorter = function(a, b) {
123
+ if (a.publicId < b.publicId) return 1;
124
+ if (a.publicId > b.publicId) return -1;
125
+ return 0;
126
+ };
127
+
128
+ // Fetch playlist by tag. Since this operation involves an API call
129
+ // the function returns a Promise when the operation completes.
130
+ // The return value is 'player'.
131
+ player.playlistByTag('demo', {
132
+ sorter: sorter,
133
+ autoAdvance: 0,
134
+ repeat: true
135
+ }).then(function(player) {
136
+ var divElem = document.querySelector("div#playlist-data");
137
+ var list = player.playlist().list().map(function(source) {
138
+ return source.publicId()
139
+ }).join(', ');
140
+
141
+ divElem.innerText = "Playlist: " + list
142
+ });
143
+
144
+ </code>
145
+ </pre>
146
+ </div>
147
+
148
+ </body>
149
+ </html>