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/live-customer.html ADDED
@@ -0,0 +1,128 @@
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
+ <!--
18
+ We're loading scripts & style dynamically for development/testing.
19
+ Real-world usage would look like this:
20
+
21
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
22
+
23
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
24
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
25
+
26
+ -->
27
+
28
+ <script type="text/javascript" src="./scripts.js"></script>
29
+
30
+ <script type="text/javascript">
31
+ window.addEventListener('load', function(){
32
+
33
+ var cld = cloudinary.Cloudinary.new({ cloud_name: "canada-goose", secure: true });
34
+ var demoplayer = cld.videoPlayer('jordin-video-en', {
35
+ publicId: 'videos/parkas/CG_FW19LITO_PARKAS_HERO_1920x1080_English',
36
+ fluid: true,
37
+ loop: false,
38
+ controls: true,
39
+ autoplayMode: 'never',
40
+ crop: 'fill',
41
+ sourceTypes: ["mp4"],
42
+ videojs: {
43
+ bigPlayButton: true,
44
+ loadingSpinner: true
45
+ }
46
+ });
47
+ var herowomen = cld.videoPlayer('hero-womens', {
48
+ publicId: 'videos/parkas/CG_FW19_Parkas_Aldridge_960x718',
49
+ fluid: true,
50
+ loop: true,
51
+ controls: false,
52
+ autoplayMode: 'always',
53
+ crop: 'fill',
54
+ sourceTypes: ["webm"],
55
+ videojs: {
56
+ bigPlayButton: false,
57
+ loadingSpinner: false
58
+ }
59
+ });
60
+ var heromen = cld.videoPlayer('hero-mens', {
61
+ publicId: 'videos/parkas/CG_FW19_Parkas_Erickson_960x718',
62
+ fluid: true,
63
+ loop: true,
64
+ controls: false,
65
+ autoplayMode: 'webm',
66
+ crop: 'fill',
67
+ sourceTypes: ["mp4"],
68
+ videojs: {
69
+ bigPlayButton: false,
70
+ loadingSpinner: false
71
+ }
72
+ });
73
+
74
+ }, false);
75
+ </script>
76
+
77
+ </head>
78
+ <body>
79
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
80
+ <nav class="nav mb-2">
81
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
82
+ </nav>
83
+ <h1>Cloudinary Video Player</h1>
84
+ <h3 class="mb-4">Demo player</h3>
85
+
86
+ <video
87
+ id="jordin-video-en"
88
+ playsinline
89
+ controls
90
+ muted
91
+ autoplay
92
+ class="cld-video-player"
93
+ width="500"
94
+ ></video>
95
+ <br/>
96
+ <br/>
97
+
98
+ <h3 class="mb-4">herowomen player</h3>
99
+
100
+ <video
101
+ id="hero-womens"
102
+ playsinline
103
+ controls
104
+ muted
105
+ autoplay
106
+ class="cld-video-player"
107
+ width="500"
108
+ ></video>
109
+ <br/>
110
+ <br/>
111
+ <h3 class="mb-4">hero men player</h3>
112
+
113
+ <video
114
+ id="hero-mens"
115
+ playsinline
116
+ controls
117
+ muted
118
+ autoplay
119
+ class="cld-video-player"
120
+ width="500"
121
+ ></video>
122
+ <p class="mt-4">
123
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
124
+ </p>
125
+ </div>
126
+
127
+ </body>
128
+ </html>
package/docs/multiple-players.html ADDED
@@ -0,0 +1,125 @@
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 players = cld.videoPlayers('.cld-video-player', {
35
+ autoplay: true,
36
+ controls: true,
37
+ transformation: { width: 500, crop: 'limit' }
38
+ });
39
+
40
+ }, false);
41
+ </script>
42
+
43
+ </head>
44
+ <body>
45
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
46
+ <nav class="nav mb-2">
47
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
48
+ </nav>
49
+ <h1>Cloudinary Video Player</h1>
50
+ <h3 class="mb-4">Multiple Players</h3>
51
+
52
+ <h3 class="text-primary">Player 1</h3>
53
+ <div class="video-container mt-4 mb-4">
54
+ <video
55
+ muted
56
+ playsinline
57
+ data-cld-public-id="elephants"
58
+ class="cld-video-player cld-video-player-skin-dark"
59
+ ></video>
60
+ </div>
61
+
62
+ <h3 class="text-primary">Player 2</h3>
63
+ <div class="video-container mt-4 mb-4">
64
+ <video
65
+ muted
66
+ playsinline
67
+ data-cld-public-id="marmots"
68
+ class="cld-video-player cld-video-player-skin-light">
69
+ </video>
70
+ </div>
71
+
72
+ <h3 class="text-primary">Player 3</h3>
73
+ <div class="video-container mt-4 mb-4">
74
+ <video
75
+ muted
76
+ playsinline
77
+ data-cld-public-id="snow_deer_short"
78
+ class="cld-video-player">
79
+ </video>
80
+ </div>
81
+
82
+ <p class="mt-4">
83
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
84
+ </p>
85
+
86
+ <h3 class="mt-4">Example Code:</h3>
87
+ <pre>
88
+ <code class="language-html">
89
+
90
+ &lt;video
91
+ muted
92
+ data-cld-public-id="elephants"
93
+ class="cld-video-player cld-video-player-skin-dark"&gt;
94
+ &lt;/video&gt;
95
+
96
+ &lt;video
97
+ muted
98
+ data-cld-public-id="marmots"
99
+ class="cld-video-player cld-video-player-skin-light"&gt;
100
+ &lt;/video&gt;
101
+
102
+ &lt;video
103
+ muted
104
+ data-cld-public-id="snow_deer_short"
105
+ class="cld-video-player"&gt;
106
+ &lt;/video&gt;
107
+
108
+ </code>
109
+ <code class="language-javascript">
110
+
111
+ var cld = cloudinary.Cloudinary.new({ cloud_name: &apos;demo&apos; });
112
+
113
+ // Initialize players
114
+ var players = cld.videoPlayers(&apos;.cld-video-player&apos;, {
115
+ autoplay: true,
116
+ controls: true,
117
+ transformation: { width: 500, crop: &apos;limit&apos; }
118
+ });
119
+ </code>
120
+ </pre>
121
+ </div>
122
+ </div>
123
+
124
+ </body>
125
+ </html>
package/docs/playlist-by-tag-cap.html ADDED
@@ -0,0 +1,182 @@
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 tt = {
33
+ surf_competition: {
34
+ captions: {
35
+ label: "English captions",
36
+ language: "en",
37
+ default: true,
38
+ url:
39
+ "https://res.cloudinary.com/yaronr/raw/upload/v1558965984/Meetup_english.vtt"
40
+ },
41
+ subtitles: [
42
+ {
43
+ label: "German subtitles",
44
+ language: "de",
45
+ url:
46
+ "https://res.cloudinary.com/yaronr/raw/upload/v1558966008/Meetup_german.vtt"
47
+ },
48
+ {
49
+ label: "Russian subtitles",
50
+ language: "ru",
51
+ url:
52
+ "https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt"
53
+ }
54
+ ]
55
+ },
56
+ finish_line: {
57
+ captions: {
58
+ label: "English captions",
59
+ language: "en",
60
+ default: true,
61
+ url: "https://res.cloudinary.com/demo/raw/upload/outdoors.vtt"
62
+ }
63
+ },
64
+ dirt_bike: {
65
+ captions: {
66
+ label: "English captions",
67
+ language: "en",
68
+ default: true,
69
+ url:
70
+ "https://res.cloudinary.com/yaronr/raw/upload/v1558966053/Meetup_russian.vtt"
71
+ }
72
+ }
73
+ };
74
+
75
+ function getTT(res) {
76
+ return { textTracks: tt[res.publicId] || tt["dirt_bike"] };
77
+ }
78
+
79
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
80
+
81
+ var player = cld.videoPlayer('player', {})
82
+
83
+ var sorter = function(a, b) {
84
+ if (a.publicId < b.publicId) return 1;
85
+ if (a.publicId > b.publicId) return -1;
86
+ return 0;
87
+ };
88
+
89
+ // Fetch playlist by tag. Since this operation involves an API call
90
+ // the function returns a Promise when the operation completes.
91
+ // The return value is 'player'.
92
+ player.playlistByTag('video_race', {
93
+ sorter: sorter,
94
+ autoAdvance: true,
95
+ repeat: true,
96
+ presentUpcoming: false,
97
+ sourceParams: getTT
98
+ }).then(function(player) {
99
+ var divElem = document.querySelector("div#playlist-data");
100
+ var list = player.playlist().list().map(function(source) {
101
+ return source.publicId()
102
+ }).join(', ');
103
+
104
+ divElem.innerText = "Playlist: " + list
105
+ });
106
+
107
+ }, false);
108
+ </script>
109
+
110
+ </head>
111
+ <body>
112
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
113
+ <nav class="nav mb-2">
114
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
115
+ </nav>
116
+ <h1>Cloudinary Video Player</h1>
117
+ <h3 class="mb-4">Playlist by tag</h3>
118
+
119
+ <video
120
+ id="player"
121
+ playsinline
122
+ controls
123
+ autoplay
124
+ muted
125
+ class="cld-video-player"
126
+ width="500"
127
+ ></video>
128
+
129
+ <p class="mt-4">
130
+ <a href="https://cloudinary.com/documentation/video_player_playlists_recommendations#create_a_playlist_for_a_specified_tag">Playlist by tag documentation</a>
131
+ </p>
132
+
133
+ <h3 class="mt-4">Example Code:</h3>
134
+
135
+ <pre><code class="language-html">
136
+
137
+ &lt;video
138
+ id="player"
139
+ controls
140
+ autoplay
141
+ muted
142
+ class="cld-video-player"
143
+ width="500"
144
+ &gt;&lt;/video&gt;
145
+
146
+ </code>
147
+ <code class="language-javascript">
148
+
149
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
150
+
151
+ var player = cld.videoPlayer('player', {})
152
+
153
+ var sorter = function(a, b) {
154
+ if (a.publicId < b.publicId) return 1;
155
+ if (a.publicId > b.publicId) return -1;
156
+ return 0;
157
+ };
158
+
159
+ // Fetch playlist by tag. Since this operation involves an API call
160
+ // the function returns a Promise when the operation completes.
161
+ // The return value is 'player'.
162
+ player.playlistByTag('video_race', {
163
+ sorter: sorter,
164
+ autoAdvance: true,
165
+ repeat: true,
166
+ presentUpcoming: false
167
+ }).then(function(player) {
168
+ var divElem = document.querySelector("div#playlist-data");
169
+ var list = player.playlist().list().map(function(source) {
170
+ return source.publicId()
171
+ }).join(', ');
172
+
173
+ divElem.innerText = "Playlist: " + list
174
+ });
175
+
176
+ </code>
177
+ </pre>
178
+ </div>
179
+
180
+
181
+ </body>
182
+ </html>
package/docs/playlist-by-tag.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
+
27
+ <script type="text/javascript" src="./scripts.js"></script>
28
+
29
+ <script type="text/javascript">
30
+ window.addEventListener('load', function(){
31
+
32
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
33
+
34
+ var player = cld.videoPlayer('player', {})
35
+
36
+ var sorter = function(a, b) {
37
+ if (a.publicId < b.publicId) return 1;
38
+ if (a.publicId > b.publicId) return -1;
39
+ return 0;
40
+ };
41
+
42
+ // Fetch playlist by tag. Since this operation involves an API call
43
+ // the function returns a Promise when the operation completes.
44
+ // The return value is 'player'.
45
+ player.playlistByTag('video_race', {
46
+ sorter: sorter,
47
+ autoAdvance: true,
48
+ repeat: true,
49
+ presentUpcoming: false
50
+ }).then(function(player) {
51
+ var divElem = document.querySelector("div#playlist-data");
52
+ var list = player.playlist().list().map(function(source) {
53
+ return source.publicId()
54
+ }).join(', ');
55
+
56
+ divElem.innerText = "Playlist: " + list
57
+ });
58
+
59
+ }, false);
60
+ </script>
61
+
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
+ <h1>Cloudinary Video Player</h1>
69
+ <h3 class="mb-4">Playlist by tag</h3>
70
+
71
+ <video
72
+ id="player"
73
+ playsinline
74
+ controls
75
+ autoplay
76
+ muted
77
+ class="cld-video-player"
78
+ width="500">
79
+ </video>
80
+
81
+ <p class="mt-4">
82
+ <a href="https://cloudinary.com/documentation/video_player_playlists_recommendations#create_a_playlist_for_a_specified_tag">Playlist by tag documentation</a>
83
+ </p>
84
+
85
+ <h3 class="mt-4">Example Code:</h3>
86
+
87
+ <pre><code class="language-html">
88
+
89
+ &lt;video
90
+ id="player"
91
+ controls
92
+ autoplay
93
+ muted
94
+ class="cld-video-player"
95
+ width="500"&gt;
96
+ &lt;/video&gt;
97
+
98
+ </code>
99
+ <code class="language-javascript">
100
+
101
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
102
+
103
+ var player = cld.videoPlayer('player', {})
104
+
105
+ var sorter = function(a, b) {
106
+ if (a.publicId < b.publicId) return 1;
107
+ if (a.publicId > b.publicId) return -1;
108
+ return 0;
109
+ };
110
+
111
+ // Fetch playlist by tag. Since this operation involves an API call
112
+ // the function returns a Promise when the operation completes.
113
+ // The return value is 'player'.
114
+ player.playlistByTag('video_race', {
115
+ sorter: sorter,
116
+ autoAdvance: true,
117
+ repeat: true,
118
+ presentUpcoming: false
119
+ }).then(function(player) {
120
+ var divElem = document.querySelector("div#playlist-data");
121
+ var list = player.playlist().list().map(function(source) {
122
+ return source.publicId()
123
+ }).join(', ');
124
+
125
+ divElem.innerText = "Playlist: " + list
126
+ });
127
+
128
+ </code>
129
+ </pre>
130
+ </div>
131
+
132
+ </body>
133
+ </html>