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/autoplay-fallback.html ADDED
@@ -0,0 +1,138 @@
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 src="https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.20/src/ua-parser.min.js"></script>
28
+
29
+ <script type="text/javascript" src="./scripts.js"></script>
30
+
31
+ <script type="text/javascript">
32
+ window.addEventListener('load', function(){
33
+
34
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
35
+
36
+ player = cld.videoPlayer('player', {
37
+ publicId: 'product-gallery-tutorial_hlk0na',
38
+ });
39
+ playerNoAuto = cld.videoPlayer('player-no-auto', {
40
+ publicId: 'product-gallery-tutorial_hlk0na',
41
+ });
42
+ playerAutoProg = cld.videoPlayer('player-auto-prog', {
43
+ publicId: 'product-gallery-tutorial_hlk0na',
44
+ });
45
+ playerAutoProg.play()
46
+ /*
47
+ player.videojs.on('playing', function() {
48
+ document.getElementById('cached-info').innerHTML = uap.getBrowser().name + ' is playing ' + player.videojs.currentSrc();
49
+ });
50
+ */
51
+ }, false);
52
+
53
+ </script>
54
+
55
+ </head>
56
+ <body>
57
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
58
+ <nav class="nav mb-2">
59
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
60
+ </nav>
61
+ <h1>Cloudinary Video Player</h1>
62
+
63
+ <video
64
+ id="player"
65
+ playsinline
66
+ controls
67
+ muted
68
+ autoplay
69
+ class="cld-video-player"
70
+ width="500">
71
+ </video>
72
+
73
+ <span id="cached-info"></span>
74
+ <h3 class="mb-4">Autoplay inline</h3>
75
+
76
+ <br/>
77
+ <br/>
78
+
79
+ <video
80
+ id="player-no-auto"
81
+ playsinline
82
+ controls
83
+ muted
84
+ class="cld-video-player"
85
+ width="500">
86
+ </video>
87
+
88
+ <span id="cached-info-webm"></span>
89
+
90
+ <h3 class="mb-4">No autoplay</h3>
91
+
92
+ <br/>
93
+ <br/>
94
+
95
+ <video
96
+ id="player-auto-prog"
97
+ playsinline
98
+ controls
99
+ muted
100
+ class="cld-video-player"
101
+ width="500">
102
+ </video>
103
+
104
+ <h3 class="mb-4">Call play api</h3>
105
+
106
+ <p class="mt-4">
107
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
108
+ </p>
109
+
110
+ <h3 class="mt-4">Example Code:</h3>
111
+ <pre>
112
+ <code class="language-html">
113
+ &lt;video
114
+ id="player"
115
+ controls
116
+ muted
117
+ autoplay
118
+ class="cld-video-player"
119
+ width="500"&gt;
120
+ &lt;/video&gt;
121
+ </code>
122
+ <code class="language-javascript">
123
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
124
+
125
+ // Initialize player
126
+ var player = cld.videoPlayer('player');
127
+
128
+ // Define source
129
+ var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };
130
+
131
+ // Play source
132
+ player.source(source);
133
+ </code>
134
+ </pre>
135
+ </div>
136
+
137
+ </body>
138
+ </html>
package/docs/autoplay-on-scroll.html ADDED
@@ -0,0 +1,107 @@
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
+ }, false);
37
+ </script>
38
+
39
+ </head>
40
+ <body>
41
+
42
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
43
+ <nav class="nav mb-2">
44
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
45
+ </nav>
46
+ <h1>Cloudinary Video Player</h1>
47
+ <h3 class="mb-4">Autoplay on scroll</h3>
48
+
49
+ <p class="mt-4">
50
+ <a href="https://cloudinary.com/documentation/video_player_customization#additional_common_configurations">Autoplay on scroll documentation</a>
51
+ </p>
52
+
53
+ <h3 class="mb-4">Example Code:</h3>
54
+
55
+ <pre><code class="language-html">
56
+ &lt;video
57
+ id="player"
58
+ controls
59
+ class="cld-video-player"
60
+ width="500"
61
+ data-cld-public-id="sea_turtle"
62
+ data-cld-autoplay-mode="on-scroll"&gt;
63
+ &lt;/video&gt;
64
+ </code></pre>
65
+
66
+ <pre><code class="language-javascript">
67
+
68
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
69
+
70
+ var player = cld.videoPlayer('player');
71
+
72
+ </code></pre>
73
+
74
+ <p class="alert alert-primary">
75
+ <b>Scroll down to see the player and then up to see the above in action.</b>
76
+ </p>
77
+
78
+ <p>
79
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim.
80
+ In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in finibus nisi.
81
+ Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros neque. Etiam cursus imperdiet aliquet.
82
+ </p>
83
+
84
+ <div>
85
+ <video
86
+ id="player"
87
+ playsinline
88
+ controls
89
+ class="cld-video-player"
90
+ width="500"
91
+ data-cld-public-id="sea_turtle"
92
+ data-cld-autoplay-mode="on-scroll">
93
+ </video>
94
+ </div>
95
+
96
+ <p>
97
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim.
98
+ In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in finibus nisi.
99
+ Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros neque. Etiam cursus imperdiet aliquet.
100
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim.
101
+ In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in finibus nisi.
102
+ Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros neque. Etiam cursus imperdiet aliquet.
103
+ </p>
104
+ </div>
105
+
106
+ </body>
107
+ </html>
package/docs/codec-fallback.html ADDED
@@ -0,0 +1,158 @@
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 src="https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.20/src/ua-parser.min.js"></script>
28
+
29
+ <script type="text/javascript" src="./scripts.js"></script>
30
+
31
+ <script type="text/javascript">
32
+ window.addEventListener('load', function(){
33
+
34
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
35
+ var uap = new UAParser(navigator.userAgent);
36
+
37
+ player = cld.videoPlayer('player', {
38
+ publicId: 'product-gallery-tutorial_hlk0na',
39
+ info: { title: 'Video too big cached' },
40
+ });
41
+ player.videojs.on('playing', function() {
42
+ document.getElementById('cached-info').innerHTML = uap.getBrowser().name + ' is playing ' + player.videojs.currentSrc();
43
+ });
44
+ playerWebm = cld.videoPlayer('player-webm', {
45
+ publicId: 'product-gallery-tutorial_hlk0na',
46
+ info: { title: 'Video too big cached' },
47
+ sourceTypes: ['webm']
48
+ });
49
+ playerWebm.videojs.on('playing', function() {
50
+ document.getElementById('cached-info-webm').innerHTML = uap.getBrowser().name + ' is playing ' + playerWebm.videojs.currentSrc();
51
+ });
52
+ playerTooBig = cld.videoPlayer('player-too-big', {
53
+ publicId: 'Image_Performance',
54
+ info: { title: 'Video too big to transcode' },
55
+ });
56
+ playerSmall = cld.videoPlayer('player-small', {
57
+ publicId: 'what_is_cloudinary_sd',
58
+ info: { title: 'Small video' },
59
+ });
60
+ playerSmall.videojs.on('playing', function() {
61
+ document.getElementById('small-info').innerHTML = uap.getBrowser().name + ' is playing ' + playerSmall.videojs.currentSrc();
62
+ });
63
+ }, false);
64
+
65
+ </script>
66
+
67
+ </head>
68
+ <body>
69
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
70
+ <nav class="nav mb-2">
71
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
72
+ </nav>
73
+ <h1>Cloudinary Video Player</h1>
74
+ <h3 class="mb-4">Too big cached mp4</h3>
75
+
76
+ <video
77
+ id="player"
78
+ playsinline
79
+ controls
80
+ muted
81
+ autoplay
82
+ class="cld-video-player"
83
+ width="500"
84
+ ></video>
85
+ <span id="cached-info"></span>
86
+ <h3 class="mb-4">Too big cached webm</h3>
87
+
88
+ <video
89
+ id="player-webm"
90
+ playsinline
91
+ controls
92
+ muted
93
+ autoplay
94
+ class="cld-video-player"
95
+ width="500"
96
+ ></video>
97
+ <span id="cached-info-webm"></span>
98
+ <h3 class="mb-4">Too big error</h3>
99
+ <br/>
100
+ <video
101
+ id="player-too-big"
102
+ playsinline
103
+ controls
104
+ muted
105
+ autoplay
106
+ class="cld-video-player"
107
+ width="500">
108
+ </video>
109
+
110
+ <br/>
111
+
112
+ <h3 class="mb-4">Small video can transcode</h3>
113
+
114
+ <video
115
+ id="player-small"
116
+ playsinline
117
+ controls
118
+ muted
119
+ autoplay
120
+ class="cld-video-player"
121
+ width="500">
122
+ </video>
123
+
124
+ <span id="small-info"></span>
125
+
126
+ <p class="mt-4">
127
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
128
+ </p>
129
+
130
+ <h3 class="mt-4">Example Code:</h3>
131
+ <pre>
132
+ <code class="language-html">
133
+ &lt;video
134
+ id="player"
135
+ controls
136
+ muted
137
+ autoplay
138
+ class="cld-video-player"
139
+ width="500"&gt;
140
+ &lt;/video&gt;
141
+ </code>
142
+ <code class="language-javascript">
143
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
144
+
145
+ // Initialize player
146
+ var player = cld.videoPlayer('player');
147
+
148
+ // Define source
149
+ var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };
150
+
151
+ // Play source
152
+ player.source(source);
153
+ </code>
154
+ </pre>
155
+ </div>
156
+
157
+ </body>
158
+ </html>
package/docs/colors.html ADDED
@@ -0,0 +1,135 @@
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
+ players = cld.videoPlayers('.cld-video-player', {
35
+ autoplay: true,
36
+ controls: true,
37
+ transformation: { width: 700, crop: 'limit' },
38
+ // We use html data-attr to set colors, but you can also do it here:
39
+ // colors: { "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }
40
+ });
41
+
42
+ }, false);
43
+ </script>
44
+
45
+ </head>
46
+ <body>
47
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
48
+ <nav class="nav mb-2">
49
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
50
+ </nav>
51
+ <h1>Cloudinary Video Player</h1>
52
+ <h3 class="mb-4">Colors API</h3>
53
+
54
+ <p>Set custom colors via JS config or HTML data attributes</p>
55
+
56
+ <h3 class="text-primary">Player 1</h3>
57
+ <div class="video-container mt-4 mb-4">
58
+ <video
59
+ muted
60
+ playsinline
61
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
62
+ data-cld-colors='{ "base": "#f44336", "accent": "#a70b00", "text": "#fff" }'
63
+ class="cld-video-player cld-video-player-skin-light"
64
+ ></video>
65
+ </div>
66
+ <h3 class="text-primary">Player 2</h3>
67
+ <div class="video-container mt-4 mb-4">
68
+ <video
69
+ muted
70
+ playsinline
71
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
72
+ data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
73
+ class="cld-video-player cld-video-player-skin-dark"
74
+ ></video>
75
+ </div>
76
+
77
+ <h3 class="text-primary">Player 3</h3>
78
+ <div class="video-container mt-4 mb-4">
79
+ <video
80
+ muted
81
+ playsinline
82
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
83
+ data-cld-colors='{ "base": "#eef9ee", "accent": "#00e64c", "text": "#009688" }'
84
+ class="cld-video-player cld-video-player-skin-light"
85
+ ></video>
86
+ </div>
87
+
88
+ <p class="mt-4">
89
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
90
+ </p>
91
+
92
+ <h3 class="mt-4">Example Code:</h3>
93
+ <pre>
94
+ <code class="language-html">
95
+
96
+ &lt;video
97
+ muted
98
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
99
+ data-cld-colors='{ "base": "#3b4146", "accent": "#17a2b8", "text": "#e83e8c" }'
100
+ class="cld-video-player cld-video-player-skin-light"&gt;
101
+ &lt;/video&gt;
102
+
103
+ &lt;video
104
+ muted
105
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
106
+ data-cld-colors='{ "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }'
107
+ class="cld-video-player cld-video-player-skin-dark"&gt;
108
+ &lt;/video&gt;
109
+
110
+ &lt;video
111
+ muted
112
+ data-cld-source='{ "publicId": "sea_turtle", "info": { "title": "Sea turtle", "subtitle": "Short movie about a sea turtle" } }'
113
+ data-cld-colors='{ "base": "#eef9ee", "accent": "#00e64c", "text": "#009688" }'
114
+ class="cld-video-player cld-video-player-skin-light"&gt;
115
+ &lt;/video&gt;
116
+
117
+ </code>
118
+ <code class="language-javascript">
119
+ var cld = cloudinary.Cloudinary.new({ cloud_name: &apos;demo&apos; });
120
+
121
+ // Initialize players
122
+ var players = cld.videoPlayers('.cld-video-player', {
123
+ autoplay: true,
124
+ controls: true,
125
+ transformation: { width: 700, crop: 'limit' },
126
+ // We use html data-attr to set colors, but you can also do it here:
127
+ // colors: { "base": "#111", "accent": "#03a9f4", "text": "#ffeb3b" }
128
+ });
129
+ </code>
130
+ </pre>
131
+ </div>
132
+ </div>
133
+
134
+ </body>
135
+ </html>