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/analytics.html ADDED
@@ -0,0 +1,140 @@
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
+ <!-- Google Analytics Code Snippet -->
30
+ <script>
31
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
32
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
33
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
34
+ })(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');
35
+
36
+ ga('create', 'UA-99366171-1', 'auto');
37
+ ga('send', 'pageview');
38
+ </script>
39
+
40
+ <script type="text/javascript">
41
+ window.addEventListener('load', function(){
42
+
43
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
44
+
45
+ player = cld.videoPlayer('player', {
46
+ analytics: { // Enable player analytics
47
+ events: [
48
+ 'play',
49
+ 'pause',
50
+ 'volumechange',
51
+ { type: 'percentsplayed', percents: [10, 50, 75, 100] }, // Some events may have additional settings
52
+ 'start',
53
+ 'ended',
54
+ 'seek',
55
+ 'fullscreenchange'
56
+ ]
57
+ }
58
+ });
59
+
60
+ var source = { publicId: 'marmots', info: { title: 'marmots', subtitle: 'marmots subtitle', description: 'lorem ipsum marmots' } };
61
+
62
+ player.source(source).play();
63
+ }, false);
64
+ </script>
65
+
66
+ </head>
67
+ <body>
68
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
69
+
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">Analytics</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
+
86
+ <p class="mt-4">
87
+ <a href="https://cloudinary.com/documentation/video_player_events_analytics#tracking_video_player_analytics">Analytics documentation</a>
88
+ </p>
89
+
90
+ <h3 class="mt-4">Example Code:</h3>
91
+
92
+ <pre>
93
+ <code class="language-html">
94
+
95
+ &lt;video
96
+ id="player"
97
+ controls
98
+ muted
99
+ class="cld-video-player"
100
+ width="500"&gt;
101
+ &lt;/video&gt;
102
+
103
+ </code>
104
+ <code class="language-javascript">
105
+
106
+ &lt;!-- Google Analytics Code Snippet --&gt;
107
+ &lt;script&gt;
108
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
109
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
110
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
111
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
112
+
113
+ ga('create', 'UA-99366171-1', 'auto');
114
+ ga('send', 'pageview');
115
+ &lt;/script&gt;
116
+
117
+ &lt;!-- Actual code --&gt;
118
+ &lt;script type="text/javascript"&gt;
119
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
120
+
121
+ // Initialize player
122
+ var player = cld.videoPlayer('player', {
123
+ analytics: { // Enable player analytics
124
+ events: [
125
+ 'play',
126
+ 'pause',
127
+ { type: 'percentsplayed', percents: [10, 50, 75, 100] }, // Some events may have additional settings
128
+ 'start',
129
+ 'ended'
130
+ ]
131
+ }
132
+ });
133
+
134
+ &lt;/script&gt;
135
+ </code>
136
+ </pre>
137
+ </div>
138
+
139
+ </body>
140
+ </html>
package/docs/api.html ADDED
@@ -0,0 +1,302 @@
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
+ var options = location.search.split('fetchErrorUsing=')[1] === 'get' ? {fetchErrorUsingGet : true} : {};
34
+
35
+ player = cld.videoPlayer('player', options);
36
+
37
+ player.playlist([
38
+ 'snow_deer',
39
+ 'sea_turtle',
40
+ 'snow_horses'
41
+ ], { autoAdvance: 0 }).play();
42
+
43
+ // Button 'click' event handlers
44
+ document.querySelector("#vid-seek-minus").addEventListener('click', function() {
45
+ player.currentTime(player.currentTime() - 10);
46
+ });
47
+
48
+ document.querySelector("#vid-seek-plus").addEventListener('click', function() {
49
+ player.currentTime(player.currentTime() + 10);
50
+ });
51
+
52
+ document.querySelector("#vid-play-prev").addEventListener('click', function() {
53
+ player.playPrevious();
54
+ });
55
+
56
+ document.querySelector("#vid-play").addEventListener('click', function() {
57
+ player.play();
58
+ });
59
+
60
+ document.querySelector("#vid-play-next").addEventListener('click', function() {
61
+ player.playNext();
62
+ });
63
+
64
+ document.querySelector("#vid-pause").addEventListener('click', function() {
65
+ player.pause();
66
+ });
67
+
68
+ document.querySelector("#vid-stop").addEventListener('click', function() {
69
+ player.stop();
70
+ });
71
+
72
+ document.querySelector("#vid-mute").addEventListener('click', function() {
73
+ player.mute();
74
+ });
75
+
76
+ document.querySelector("#vid-unmute").addEventListener('click', function() {
77
+ player.unmute();
78
+ });
79
+
80
+ document.querySelector("#vid-volume-minus").addEventListener('click', function() {
81
+ player.volume(player.volume() - 0.1);
82
+ });
83
+
84
+ document.querySelector("#vid-volume-plus").addEventListener('click', function() {
85
+ player.volume(player.volume() + 0.1);
86
+ });
87
+
88
+ document.querySelector("#vid-maximize").addEventListener('click', function() {
89
+ player.maximize();
90
+ });
91
+
92
+ document.querySelector("#vid-toggle-controls").addEventListener('click', function() {
93
+ player.controls(!player.controls());
94
+ });
95
+
96
+ // Register to some video player events
97
+ var eventTypes = ['play', 'pause', 'volumechange', 'mute', 'unmute', 'fullscreenchange',
98
+ 'seek', 'sourcechanged', 'percentsplayed', 'ended'];
99
+
100
+ var eventsDiv = document.querySelector('#vid-events');
101
+ eventTypes.forEach(function(eventType) {
102
+ player.on(eventType, function(event) {
103
+ var eventStr = eventType;
104
+ if (event.eventData) {
105
+ eventStr = eventStr + ": " + JSON.stringify(event.eventData);
106
+ }
107
+ var text = document.createTextNode(eventStr);
108
+ var textDiv = document.createElement('div');
109
+ textDiv.appendChild(text);
110
+ eventsDiv.appendChild(textDiv);
111
+ updateEvents();
112
+ })
113
+ });
114
+
115
+ function updateEvents() {
116
+ var eventsDiv = document.querySelector('#vid-events');
117
+ eventsDiv.scrollTop = eventsDiv.scrollHeight;
118
+ }
119
+
120
+ }, false);
121
+ </script>
122
+
123
+ </head>
124
+ <body>
125
+
126
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
127
+ <nav class="nav mb-2">
128
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
129
+ </nav>
130
+ <h1>Cloudinary Video Player</h1>
131
+ <h3 class="mb-4">API and Events</h3>
132
+
133
+ <div class="video-container">
134
+
135
+ <video
136
+ id="player"
137
+ playsinline
138
+ controls
139
+ muted
140
+ class="cld-video-player"
141
+ width="600"
142
+ ></video>
143
+
144
+ <div class="mt-4">
145
+ <div class="btn-group">
146
+ <button id="vid-seek-minus" class="btn btn-outline-primary mb-2">-10 seconds</button>
147
+ <button id="vid-seek-plus" class="btn btn-outline-primary border-primary mb-2">+10 seconds</button>
148
+ </div>
149
+ <div class="btn-group">
150
+ <button id="vid-play-prev" class="btn btn-outline-primary mb-2">Previous</button>
151
+ <button id="vid-play-next" class="btn btn-outline-primary mb-2">Next</button>
152
+ <button id="vid-play" class="btn btn-outline-primary mb-2">Play</button>
153
+ <button id="vid-pause" class="btn btn-outline-primary mb-2">Pause</button>
154
+ <button id="vid-stop" class="btn btn-outline-primary mb-2">Stop</button>
155
+ </div>
156
+ </div>
157
+
158
+ <div>
159
+ <div class="btn-group">
160
+ <button id="vid-mute" class="btn btn-outline-primary mb-2">Mute</button>
161
+ <button id="vid-unmute" class="btn btn-outline-primary mb-2">Unmute</button>
162
+ <button id="vid-volume-minus" class="btn btn-outline-primary mb-2">Volume -10%</button>
163
+ <button id="vid-volume-plus" class="btn btn-outline-primary mb-2">Volume +10%</button>
164
+ </div>
165
+ <div class="btn-group">
166
+ <button id="vid-maximize" class="btn btn-outline-primary mb-2">Maximize</button>
167
+ <button id="vid-toggle-controls" class="btn btn-outline-primary mb-2">Toggle Controls</button>
168
+ </div>
169
+ </div>
170
+
171
+ <div id="vid-events" class="alert alert-secondary text-center mt-4 p-4 w-100" style="overflow: scroll; height: 150px"></div>
172
+
173
+ <p class="mt-4">
174
+ <a href="https://cloudinary.com/documentation/video_player_api_reference#events">API and Events documentation</a>
175
+ </p>
176
+
177
+ </div>
178
+
179
+ <h3>Example Code:</h3>
180
+ <pre>
181
+ <code class="language-html">
182
+ &lt;video
183
+ id="player"
184
+ controls
185
+ muted
186
+ class="cld-video-player"
187
+ width="600"&gt;
188
+ &lt;/video&gt;
189
+
190
+ &lt;div&gt;
191
+ &lt;button id="vid-seek-minus" class="btn btn-default"&gt;-10 seconds&lt;/button&gt;
192
+ &lt;button id="vid-seek-plus" class="btn btn-default"&gt;+10 seconds&lt;/button&gt;
193
+ &lt;button id="vid-play-prev" class="btn btn-default"&gt;Previous&lt;/button&gt;
194
+ &lt;button id="vid-play-next" class="btn btn-default"&gt;Next&lt;/button&gt;
195
+ &lt;button id="vid-play" class="btn btn-default"&gt;Play&lt;/button&gt;
196
+ &lt;button id="vid-pause" class="btn btn-default"&gt;Pause&lt;/button&gt;
197
+ &lt;button id="vid-stop" class="btn btn-default"&gt;Stop&lt;/button&gt;
198
+ &lt;button id="vid-mute" class="btn btn-default"&gt;Mute&lt;/button&gt;
199
+ &lt;button id="vid-unmute" class="btn btn-default"&gt;Unmute&lt;/button&gt;
200
+ &lt;button id="vid-volume-minus" class="btn btn-default"&gt;Volume -10%&lt;/button&gt;
201
+ &lt;button id="vid-volume-plus" class="btn btn-default"&gt;Volume +10%&lt;/button&gt;
202
+ &lt;button id="vid-maximize" class="btn btn-default"&gt;Maximize&lt;/button&gt;
203
+ &lt;button id="vid-toggle-controls" class="btn btn-default"&gt;Toggle Controls&lt;/button&gt;
204
+ &lt;/div&gt;
205
+
206
+ &lt;div id="vid-events" class="alert alert-secondary text-center mt-4 p-4 w-100" style="overflow: scroll; height: 150px"&gt;&lt;/div&gt;
207
+ </code>
208
+
209
+ <code class="language-javascript">
210
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
211
+
212
+ var player = cld.videoPlayer('player');
213
+
214
+ player.playlist([
215
+ 'snow_deer',
216
+ 'sea_turtle',
217
+ 'snow_horses'
218
+ ], { autoAdvance: 0 }).play();
219
+
220
+ // Button 'click' event handlers
221
+ document.querySelector("#vid-seek-minus").addEventListener('click', function() {
222
+ player.currentTime(player.currentTime() - 10);
223
+ });
224
+
225
+ document.querySelector("#vid-seek-plus").addEventListener('click', function() {
226
+ player.currentTime(player.currentTime() + 10);
227
+ });
228
+
229
+ document.querySelector("#vid-play-prev").addEventListener('click', function() {
230
+ player.playPrevious();
231
+ });
232
+
233
+ document.querySelector("#vid-play").addEventListener('click', function() {
234
+ player.play();
235
+ });
236
+
237
+ document.querySelector("#vid-play-next").addEventListener('click', function() {
238
+ player.playNext();
239
+ });
240
+
241
+ document.querySelector("#vid-pause").addEventListener('click', function() {
242
+ player.pause();
243
+ });
244
+
245
+ document.querySelector("#vid-stop").addEventListener('click', function() {
246
+ player.stop();
247
+ });
248
+
249
+ document.querySelector("#vid-mute").addEventListener('click', function() {
250
+ player.mute();
251
+ });
252
+
253
+ document.querySelector("#vid-unmute").addEventListener('click', function() {
254
+ player.unmute();
255
+ });
256
+
257
+ document.querySelector("#vid-volume-minus").addEventListener('click', function() {
258
+ player.volume(player.volume() - 0.1);
259
+ });
260
+
261
+ document.querySelector("#vid-volume-plus").addEventListener('click', function() {
262
+ player.volume(player.volume() + 0.1);
263
+ });
264
+
265
+ document.querySelector("#vid-maximize").addEventListener('click', function() {
266
+ player.maximize();
267
+ });
268
+
269
+ document.querySelector("#vid-toggle-controls").addEventListener('click', function() {
270
+ player.controls(!player.controls());
271
+ });
272
+
273
+ // Register to some video player events
274
+ var eventTypes = ['play', 'pause', 'volumechange', 'mute', 'unmute', 'fullscreenchange',
275
+ 'seek', 'sourcechanged', 'percentsplayed', 'ended'];
276
+
277
+ var eventsDiv = document.querySelector('#vid-events');
278
+ eventTypes.forEach(function(eventType) {
279
+ player.on(eventType, function(event) {
280
+ var eventStr = eventType;
281
+ if (event.eventData) {
282
+ eventStr = eventStr + ": " + JSON.stringify(event.eventData);
283
+ }
284
+ var text = document.createTextNode(eventStr);
285
+ var textDiv = document.createElement('div');
286
+ textDiv.appendChild(text);
287
+ eventsDiv.appendChild(textDiv);
288
+ updateEvents();
289
+ })
290
+ });
291
+
292
+ function updateEvents() {
293
+ var eventsDiv = document.querySelector('#vid-events');
294
+ eventsDiv.scrollTop = eventsDiv.scrollHeight;
295
+ }
296
+
297
+ </code>
298
+ </pre>
299
+ </div>
300
+
301
+ </body>
302
+ </html>
package/docs/audio.html ADDED
@@ -0,0 +1,136 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>Cloudinary Video Player</title>
6
+ <link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7
+
8
+ <!-- Bootstrap -->
9
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
+
11
+ <!-- highlight.js -->
12
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14
+ <script>hljs.initHighlightingOnLoad();</script>
15
+
16
+ <!--
17
+ We're loading scripts & style dynamically for development/testing.
18
+ Real-world usage would look like this:
19
+
20
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
21
+
22
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
23
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
24
+
25
+ -->
26
+
27
+ <script type="text/javascript" src="./scripts.js"></script>
28
+
29
+ <script type="text/javascript">
30
+ window.addEventListener('load', function(){
31
+
32
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
33
+
34
+ var player = cld.videoPlayer('player');
35
+
36
+ var source = { publicId: 'dog', 'sourceTypes': ['audio'] };
37
+
38
+ player.source(source);
39
+
40
+ var player_t = cld.videoPlayer('player-t');
41
+
42
+ var sourceTransformation = {
43
+ publicId: 'dog',
44
+ 'sourceTypes': ['audio'],
45
+ transformation: {
46
+ start_offset: 3,
47
+ duration: 5
48
+ }
49
+ };
50
+
51
+ player_t.source(sourceTransformation);
52
+
53
+ }, false);
54
+ </script>
55
+
56
+ </head>
57
+ <body>
58
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
59
+ <nav class="nav mb-2">
60
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
61
+ </nav>
62
+ <h1>Cloudinary Video Player</h1>
63
+ <h3 class="mb-4">Audio Player</h3>
64
+
65
+ <video
66
+ id="player"
67
+ playsinline
68
+ controls
69
+ class="cld-video-player"
70
+ width="500"
71
+ ></video>
72
+
73
+ <h3 class="mb-4 mt-4">Audio Player - with transformations</h3>
74
+
75
+ <video
76
+ id="player-t"
77
+ playsinline
78
+ controls
79
+ class="cld-video-player"
80
+ width="500"
81
+ ></video>
82
+
83
+ <p class="mt-4">
84
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
85
+ </p>
86
+
87
+ <h3 class="mt-4">Example Code:</h3>
88
+ <pre>
89
+ <code class="language-html">
90
+ &lt;video
91
+ id="player"
92
+ playsinline
93
+ controls
94
+ class="cld-video-player"
95
+ width="500"
96
+ &gt;&lt;/video&gt;
97
+
98
+ &lt;video
99
+ id="player-t"
100
+ playsinline
101
+ controls
102
+ class="cld-video-player"
103
+ width="500"
104
+ &gt;&lt;/video&gt;
105
+ </code>
106
+ <code class="language-javascript">
107
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
108
+
109
+ // Initialize player
110
+ var player = cld.videoPlayer('player');
111
+
112
+ // Define source
113
+ var source = { publicId: 'dog', 'sourceTypes': ['audio'] };
114
+
115
+ // Play source
116
+ player.source(source);
117
+
118
+ var player_t = cld.videoPlayer('player-t');
119
+
120
+ // Define source with transformations
121
+ var sourceTransformation = {
122
+ publicId: 'dog',
123
+ 'sourceTypes': ['audio'],
124
+ transformation: {
125
+ start_offset: 3,
126
+ duration: 5
127
+ }
128
+ };
129
+
130
+ player_t.source(sourceTransformation);
131
+ </code>
132
+ </pre>
133
+ </div>
134
+
135
+ </body>
136
+ </html>