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/playlist.html ADDED
@@ -0,0 +1,133 @@
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 source1 = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about snow horses' } };
34
+ var source2 = { publicId: 'dirt_bike', info: { title: 'Dirt Bike', subtitle: 'A short video of dirt bikes' } };
35
+ var source3 = { publicId: 'marmots', info: { title: 'Marmots' } };
36
+
37
+ var player = cld.videoPlayer('player',{
38
+ playlistWidget: {
39
+ direction: "horizontal",
40
+ total: 4
41
+ }
42
+ });
43
+
44
+ var playlistSources = [source1, source2, source3];
45
+ var playlistOptions = {
46
+ autoAdvance: true,
47
+ repeat: true,
48
+ presentUpcoming: 8
49
+ };
50
+ // Auto advance to next video after 0 seconds, repeat the playlist when final video ends, and present upcoming video 8 seconds before the current video ends.
51
+ player.playlist(playlistSources, playlistOptions);
52
+
53
+ }, false);
54
+ </script>
55
+
56
+ <style>
57
+ .fluid-demo-container {
58
+ width: 100%;
59
+ max-width: 1024px;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
65
+ <nav class="nav mb-2">
66
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
67
+ </nav>
68
+
69
+ <h1>Cloudinary Video Player</h1>
70
+ <h3 class="mb-4">Playlist</h3>
71
+
72
+ <div class="d-flex flex-column justify-content-start align-items-start">
73
+ <video
74
+ playsinline
75
+ id="player"
76
+ controls
77
+ autoplay
78
+ class="cld-video-player"
79
+ width="500">
80
+ </video>
81
+ </div>
82
+
83
+ <p class="mt-4">
84
+ <a href="https://cloudinary.com/documentation/video_player_playlists_recommendations#creating_a_playlist">Playlist documentation</a>
85
+ </p>
86
+
87
+ <h3 class="mt-4">Example Code:</h3>
88
+
89
+ <pre>
90
+ <code class="language-html">
91
+
92
+ &lt;video
93
+ id="player"
94
+ controls
95
+ autoplay
96
+ class="cld-video-player"
97
+ width="500"&gt;
98
+ &lt;/video&gt;
99
+
100
+ </code>
101
+ </pre>
102
+
103
+ <pre>
104
+ <code class="language-javascript">
105
+
106
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
107
+
108
+ var source1 = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about snow horses' } };
109
+ var source2 = { publicId: 'dirt_bike', info: { title: 'Dirt Bike', subtitle: 'A short video of dirt bikes' } };
110
+ var source3 = { publicId: 'marmots', info: { title: 'Marmots' } };
111
+
112
+ var player = cld.videoPlayer('player',{
113
+ playlistWidget: {
114
+ direction: "horizontal",
115
+ total: 4
116
+ }
117
+ });
118
+
119
+ var playlistSources = [source1, source2, source3];
120
+ var playlistOptions = {
121
+ autoAdvance: true,
122
+ repeat: true,
123
+ presentUpcoming: 8
124
+ };
125
+ // Auto advance to next video after 0 seconds, repeat the playlist when final video ends, and present upcoming video 8 seconds before the current video ends.
126
+ player.playlist(playlistSources, playlistOptions);
127
+
128
+ </code>
129
+ </pre>
130
+ </div>
131
+
132
+ </body>
133
+ </html>
package/docs/poster.html ADDED
@@ -0,0 +1,155 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>Cloudinary Video Player</title>
7
+ <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">
8
+
9
+ <!-- Bootstrap -->
10
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
11
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12
+
13
+ <!-- highlight.js -->
14
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
15
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
16
+ <script>hljs.initHighlightingOnLoad();</script>
17
+
18
+ <!--
19
+ We're loading scripts & style dynamically for development/testing.
20
+ Real-world usage would look like this:
21
+
22
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
23
+
24
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
25
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
26
+
27
+ -->
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
+ player1 = cld.videoPlayer('player-image-poster', {
37
+ publicId: 'snow_horses'
38
+ });
39
+
40
+ player2 = cld.videoPlayer('player-frame-0', {
41
+ publicId: 'snow_horses',
42
+ posterOptions: {
43
+ transformation: {
44
+ startOffset: "0"
45
+ }
46
+ }
47
+ });
48
+
49
+ player3 = cld.videoPlayer('player-poster-options', {
50
+ publicId: 'snow_horses'
51
+ });
52
+
53
+ }, false);
54
+ </script>
55
+
56
+ </head>
57
+
58
+ <body>
59
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
60
+ <nav class="nav mb-2">
61
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
62
+ </nav>
63
+ <h1>Cloudinary Video Player</h1>
64
+ <h3 class="mb-4">Advanced Poster Configurations</h3>
65
+
66
+ <div class="video-container mb-4">
67
+ <h4>Custom image poster</h4>
68
+ <video
69
+ id="player-image-poster"
70
+ playsinline
71
+ controls
72
+ class="cld-video-player cld-fluid"
73
+ data-cld-transformation='{ "effect": ["saturation:-100"] }'
74
+ data-cld-poster-options='{ "publicId": "sample", "effect": ["saturation:-100"] }'
75
+ ></video>
76
+ </div>
77
+
78
+ <div class="video-container mb-4">
79
+ <h4>Specific frame poster</h4>
80
+ <video
81
+ id="player-frame-0"
82
+ playsinline
83
+ controls
84
+ class="cld-video-player cld-fluid"
85
+ ></video>
86
+ </div>
87
+
88
+ <div class="video-container mb-4">
89
+ <h4>Poster options transformations-array</h4>
90
+ <video
91
+ id="player-poster-options"
92
+ playsinline
93
+ controls
94
+ class="cld-video-player cld-fluid"
95
+ data-cld-poster-options='{ "transformation": [{"width": "640", "height": "360", "crop": "pad", "effect": "grayscale" },{"overlay":"cloudinary_icon", "width":"300"},{"quality": "auto", "fetch_format": "auto"}] }'
96
+ ></video>
97
+ </div>
98
+
99
+ <p class="mt-4">
100
+ <a href="https://cloudinary.com/documentation/video_player_api_reference#posteroptions">Full documentation</a>
101
+ </p>
102
+
103
+ <h3 class="mt-4">Example Code:</h3>
104
+ <pre>
105
+ <code class="language-html">
106
+ &lt;video
107
+ id="player-image-poster"
108
+ playsinline
109
+ controls
110
+ class="cld-video-player cld-fluid"
111
+ data-cld-transformation='{ "effect": ["saturation:-100"] }'
112
+ data-cld-poster-options='{ "publicId": "sample", "effect": ["saturation:-100"] }'&gt;
113
+ &lt;/video&gt;
114
+
115
+ &lt;video
116
+ id="player-frame-0"
117
+ playsinline
118
+ controls
119
+ class="cld-video-player cld-fluid"&gt;
120
+ &lt;/video&gt;
121
+
122
+ &lt;video
123
+ id="player-poster-options"
124
+ playsinline
125
+ controls
126
+ class="cld-video-player cld-fluid"
127
+ data-cld-poster-options='{ "transformation": [{"width": "640", "height": "360", "crop": "pad", "effect": "grayscale" },{"overlay":"cloudinary_icon", "width":"300"},{"quality": "auto", "fetch_format": "auto"}] }'&gt;
128
+ &lt;/video&gt;
129
+ </code>
130
+ <code class="language-javascript">
131
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
132
+
133
+ player1 = cld.videoPlayer('player-image-poster', {
134
+ publicId: 'snow_horses'
135
+ });
136
+
137
+ player2 = cld.videoPlayer('player-frame-0', {
138
+ publicId: 'snow_horses',
139
+ posterOptions: {
140
+ transformation: {
141
+ startOffset: "0"
142
+ }
143
+ }
144
+ });
145
+
146
+ player3 = cld.videoPlayer('player-poster-options', {
147
+ publicId: 'snow_horses'
148
+ });
149
+ </code>
150
+ </pre>
151
+ </div>
152
+
153
+ </body>
154
+
155
+ </html>
package/docs/raw-url.html ADDED
@@ -0,0 +1,104 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Cloudinary Video Player</title>
6
+ <link href="https://cloudinary-res.cloudinary.com/image/asset/favicon-32x32-2991a47c2caa80211bf2dbf3f29317c8.png" rel="icon" sizes="32x32" 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', secure: true });
33
+
34
+ player = cld.videoPlayer('player');
35
+
36
+ player.source('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_2MB.mp4');
37
+ adpPlayer = cld.videoPlayer('adpPlayer');
38
+ adpPlayer.source('https://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
39
+ }, false);
40
+ </script>
41
+
42
+ </head>
43
+ <body>
44
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
45
+ <nav class="nav mb-2">
46
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
47
+ </nav>
48
+ <h1>Cloudinary Video Player</h1>
49
+ <h3 class="mb-4">Video with raw URL</h3>
50
+
51
+ <video
52
+ id="player"
53
+ playsinline
54
+ controls
55
+ muted
56
+ autoplay
57
+ class="cld-video-player"
58
+ width="500">
59
+ </video>
60
+ </div>
61
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
62
+
63
+ <h3 class="mb-4">Video with raw URL adaptive</h3>
64
+
65
+ <video
66
+ id="adpPlayer"
67
+ playsinline
68
+ controls
69
+ muted
70
+ autoplay
71
+ class="cld-video-player"
72
+ width="500">
73
+ </video>
74
+
75
+ <p class="mt-4">
76
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
77
+ </p>
78
+
79
+ <h3 class="mt-4">Example Code:</h3>
80
+ <pre>
81
+ <code class="language-html">
82
+ &lt;video
83
+ id="player"
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', secure: true });
93
+
94
+ var player = cld.videoPlayer('player');
95
+
96
+ player.source('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_2MB.mp4');
97
+ var adpPlayer = cld.videoPlayer('adpPlayer');
98
+ adpPlayer.source('http://res.cloudinary.com/demo/video/upload/sp_hd/sea_turtle.mpd');
99
+ </code>
100
+ </pre>
101
+ </div>
102
+
103
+ </body>
104
+ </html>
package/docs/recommendations.html ADDED
@@ -0,0 +1,155 @@
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 crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Promise"></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
+ var source1 = {
37
+ publicId: 'surf_competition',
38
+ info: {
39
+ title: 'Surf competition',
40
+ subtitle: 'A movie about a surf competition',
41
+ description: 'A description of the surf competition movie'
42
+ }
43
+ };
44
+
45
+ var source2 = {
46
+ publicId: 'finish_line',
47
+ info: {
48
+ title: 'Finish line',
49
+ subtitle: 'A short video of a finish line',
50
+ description: 'A description of the finish line movie.'
51
+ }
52
+ };
53
+
54
+ // Recommendations can be as simple as an array of other video source objects
55
+ source1.recommendations = [source2]
56
+
57
+ // For async fetching of recommendations (e.g. fetching from database), promises can be used
58
+ source2.recommendations = new Promise(function (resolve, _) {
59
+ console.log('Going to database...');
60
+ setTimeout(function() {
61
+ console.log('Fetched source from database.', source1);
62
+ resolve([source1]);
63
+ }, 3000);
64
+ });
65
+
66
+ // Initialize player
67
+ player = cld.videoPlayer('player', { autoShowRecommendations: true });
68
+
69
+ player.source(source1);
70
+
71
+ }, false);
72
+ </script>
73
+
74
+ </head>
75
+ <body>
76
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
77
+ <nav class="nav mb-2">
78
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
79
+ </nav>
80
+ <h1>Cloudinary Video Player</h1>
81
+ <h3 class="mb-4">Recommendations</h3>
82
+
83
+ <video
84
+ id="player"
85
+ playsinline
86
+ controls
87
+ muted
88
+ autoplay
89
+ class="cld-video-player"
90
+ width="500"
91
+ ></video>
92
+
93
+ <p class="mt-4">
94
+ <a href="https://cloudinary.com/documentation/video_player_playlists_recommendations#showing_video_recommendations">Recommendations documentation</a>
95
+ </p>
96
+
97
+ <h3>Example Code:</h3>
98
+ <pre>
99
+ <code class="language-html">
100
+
101
+ &lt;video
102
+ id="player"
103
+ controls
104
+ muted
105
+ autoplay
106
+ class="cld-video-player cld-video-player-skin-dark"
107
+ data-cld-transformation='{ "width": 500, "crop": "limit" }'
108
+ &gt;&lt;/video&gt;
109
+
110
+ </code>
111
+ <code class="language-javascript">
112
+
113
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
114
+
115
+ // Set video sources
116
+ var source1 = {
117
+ publicId: 'surf_competition',
118
+ info: {
119
+ title: 'Surf competition',
120
+ subtitle: 'A movie about a surf competition',
121
+ description: 'A description of the surf competition movie'
122
+ }
123
+ };
124
+
125
+ var source2 = {
126
+ publicId: 'finish_line',
127
+ info: {
128
+ title: 'Finish line',
129
+ subtitle: 'A short video of a finish line',
130
+ description: 'A description of the finish line movie.'
131
+ }
132
+ };
133
+
134
+ // Recommendations can be as simple as an array of other video source objects
135
+ source1.recommendations = [source2];
136
+
137
+ // For async fetching of recommendations (e.g. fetching from database), promises can be used
138
+ source2.recommendations = new Promise((resolve, _) => {
139
+ console.log('Going to database...');
140
+ setTimeout(() => {
141
+ console.log('Fetched source from database.', source1)
142
+ resolve([source1]);
143
+ }, 3000);
144
+ });
145
+
146
+ // Initialize player
147
+ var player = cld.videoPlayer('player', { autoShowRecommendations: true });
148
+
149
+ player.source(source1);
150
+ </code>
151
+ </pre>
152
+ </div>
153
+
154
+ </body>
155
+ </html>