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
@@ -0,0 +1,26 @@
1
+ /*!
2
+ * Programatically add the following
3
+ */
4
+
5
+ /*!
6
+ * The buffer module from node.js, for the browser.
7
+ *
8
+ * @author Feross Aboukhadijeh <http://feross.org>
9
+ * @license MIT
10
+ */
11
+
12
+ /*! @name @videojs/http-streaming @version 2.9.1 @license Apache-2.0 */
13
+
14
+ /*! @name aes-decrypter @version 3.1.2 @license Apache-2.0 */
15
+
16
+ /*! @name pkcs7 @version 1.0.4 @license Apache-2.0 */
17
+
18
+ /*! @name videojs-contrib-ads @version 6.9.0 @license Apache-2.0 */
19
+
20
+ /*! @name videojs-contrib-quality-levels @version 2.1.0 @license Apache-2.0 */
21
+
22
+ /*! codem-isoboxer v0.3.6 https://github.com/madebyhiro/codem-isoboxer/blob/master/LICENSE.txt */
23
+
24
+ /*! http://mths.be/fromcodepoint v0.1.0 by @mathias */
25
+
26
+ /*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
@@ -0,0 +1,69 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 141.732 141.747" enable-background="new 0 0 141.732 141.747" xml:space="preserve">
5
+ <g>
6
+ <path fill="#FFFFFF" d="M115.585,109.242c-1.609,0-3.107-1.024-3.635-2.637c-0.657-2.008,0.438-4.169,2.447-4.826
7
+ c7.278-2.382,11.98-8.761,11.98-16.252c0-9.487-7.718-17.206-17.205-17.206c-0.659,0-1.368,0.052-2.231,0.164l-3.741,0.485
8
+ l-0.537-3.735c-2.299-16.016-16.251-28.094-32.454-28.094c-13.395,0-25.32,8.019-30.377,20.43l-0.952,2.335l-2.52,0.046
9
+ c-11.581,0.213-21.003,9.804-21.003,21.379c0,8.45,4.906,16.156,12.498,19.631c1.921,0.88,2.766,3.15,1.886,5.071
10
+ c-0.88,1.921-3.149,2.764-5.07,1.887C14.363,103.202,7.703,92.766,7.703,81.331c0-14.88,11.465-27.345,26.028-28.876
11
+ c6.71-14.03,20.773-22.965,36.477-22.965c18.796,0,35.135,13.178,39.372,31.184c13.519,0.219,24.45,11.284,24.45,24.854
12
+ c0,10.693-6.934,20.146-17.253,23.523C116.382,109.18,115.98,109.242,115.585,109.242z"/>
13
+ <path fill="#FFFFFF" d="M57.12,111.02c-0.001-0.001-0.001-0.001-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001
14
+ c0,0-0.001-0.001-0.001-0.001l-0.001-0.001c0,0-0.001,0-0.001-0.001h-0.001l-0.001-0.001c0.001-0.001-0.001-0.001-0.001-0.001
15
+ l-0.001-0.001c0,0-0.001,0-0.001,0l-0.001-0.001c0.001,0.001-0.001-0.001-0.001-0.001s-0.002-0.001-0.003-0.001l-0.001-0.001H57.1
16
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.003-0.001-0.002-0.001-0.003-0.001c-0.001,0.001-0.001-0.001-0.002-0.001
17
+ l-0.001-0.001c0,0-0.001-0.001-0.002-0.001l-0.001-0.001c-0.001-0.001-0.003-0.001-0.004-0.001s-0.003-0.001-0.004-0.001
18
+ c-0.001-0.001-0.001-0.001-0.002-0.001h-0.001c-0.001-0.001-0.002-0.001-0.003-0.001c-0.001-0.001-0.003-0.001-0.003-0.001
19
+ c-0.001,0-0.001,0-0.001,0l-0.002-0.001c-0.001,0-0.001-0.001-0.001-0.001h-0.001c-0.059-0.021-0.122-0.034-0.188-0.037h-0.002
20
+ h-0.002c-0.001,0-0.001,0-0.002,0c0,0,0,0-0.001,0c0,0-0.001,0-0.001,0h-0.001c-0.001-0.001-0.001-0.001-0.001-0.001
21
+ c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.002,0h-0.001h-0.001h-0.001c-0.001,0-0.002,0-0.002,0h-0.001H56.86h-0.001h-0.001
22
+ c-0.001,0-0.001,0-0.001,0h-0.001h-0.001h-0.001h-0.001c-0.001,0-0.001,0-0.001,0c-1.656,0-3.011-1.348-3.021-3V74.29h2.567
23
+ c0.004,0,0.009,0,0.013,0c0.393,0.017,0.661-0.285,0.661-0.648c0-0.271-0.166-0.503-0.402-0.6l-12.379-8.544
24
+ c-0.222-0.153-0.515-0.153-0.737,0l-12.476,8.611c-0.234,0.161-0.335,0.456-0.251,0.727c0.085,0.271,0.335,0.455,0.619,0.455h2.58
25
+ l0.002,33.674c0.013,2.328,1.883,4.228,4.262,4.288c0.027,0.003,0.053,0.005,0.08,0.005h18.481c0.004,0,0.007,0,0.011,0
26
+ c0.17-0.003,0.324-0.071,0.438-0.18c0,0,0,0,0.001-0.001c0.002-0.002,0.004-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003
27
+ c0,0,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001l0.001-0.001l0.001-0.001c0.001-0.001,0.001-0.001,0.001-0.001
28
+ c0.002-0.001,0.001-0.001,0.002-0.002c0,0,0,0,0.001-0.001l0.001-0.001c0,0,0,0,0.001-0.001c0.112-0.116,0.182-0.273,0.183-0.447
29
+ v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002C57.498,111.345,57.343,111.121,57.12,111.02z"/>
30
+ <path fill="#FFFFFF" d="M83.889,111.02c0,0-0.001-0.001-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001
31
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001c0,0-0.001-0.001-0.001-0.001
32
+ c0.001-0.001-0.001-0.001-0.002-0.001l-0.001-0.001h-0.001c-0.001,0-0.001-0.001-0.001-0.001c-0.002,0.001-0.002-0.001-0.002-0.001
33
+ l-0.002-0.001l-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001l-0.001-0.001c-0.001-0.001-0.002-0.001-0.002-0.001
34
+ c-0.001,0.001-0.001-0.001-0.003-0.001l-0.001-0.001l-0.001-0.001c0,0-0.001,0-0.002-0.001c-0.001-0.001-0.003-0.001-0.004-0.001
35
+ s-0.003-0.001-0.004-0.001c-0.001-0.001-0.001-0.001-0.002-0.001c-0.001,0-0.001,0-0.002-0.001c0,0-0.001,0-0.002-0.001
36
+ c-0.003-0.001-0.001-0.001-0.002-0.001c-0.003,0-0.001,0-0.002-0.001c0,0-0.001-0.001-0.002-0.001l-0.001-0.001h-0.001
37
+ c-0.059-0.021-0.122-0.034-0.188-0.037h-0.002c-0.001,0-0.001,0-0.001,0c-0.001,0-0.002,0-0.002,0s-0.001,0-0.001,0h-0.001h-0.001
38
+ l-0.001-0.001c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.002,0h-0.001c-0.001,0-0.001,0-0.001,0h-0.001
39
+ c-0.001,0-0.002,0-0.002,0s-0.001,0-0.002,0h-0.001c0,0-0.001,0-0.001,0h-0.001c-0.001,0-0.001,0-0.001,0h-0.001h-0.001h-0.001
40
+ h-0.001c-0.001,0-0.001,0-0.001,0c-1.655,0-3.01-1.348-3.02-3V81.829h2.579c0.009-0.001,0.016-0.001,0.026,0
41
+ c0.358,0,0.648-0.29,0.648-0.648c0-0.271-0.166-0.503-0.402-0.6l-12.38-8.544c-0.222-0.153-0.515-0.153-0.737,0L57.86,80.647
42
+ c-0.234,0.161-0.335,0.456-0.251,0.727c0.085,0.271,0.335,0.455,0.619,0.455h2.568l0.002,26.135
43
+ c0.011,2.329,1.884,4.23,4.264,4.289c0.026,0.003,0.052,0.004,0.078,0.004h18.481c0.004,0,0.007,0,0.011,0
44
+ c0.17-0.003,0.324-0.071,0.438-0.18c0,0,0,0,0.001-0.001c0.002-0.002,0.006-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003
45
+ c0.001-0.001,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001c0,0,0.001,0,0.001-0.001l0.001-0.001
46
+ c0.001,0,0.001-0.001,0.001-0.001c0.003-0.001,0.002-0.001,0.002-0.002c0,0,0,0,0.001-0.001c0,0,0,0,0.001-0.001
47
+ c0,0,0,0,0.001-0.001c0.112-0.116,0.182-0.273,0.183-0.447v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002
48
+ C84.267,111.345,84.112,111.121,83.889,111.02z"/>
49
+ <path fill="#FFFFFF" d="M110.667,111.02l-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001
50
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.001,0-0.001,0-0.001-0.001h-0.001l-0.001-0.001
51
+ c-0.001-0.001-0.001-0.001-0.001-0.001s-0.001,0-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001
52
+ c-0.001,0.001-0.001-0.001-0.002-0.001c0.001-0.001-0.001-0.001-0.002-0.001l-0.001-0.001c-0.001,0-0.001,0-0.001,0
53
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.003-0.001-0.002-0.001-0.002-0.001c-0.001,0.001-0.001-0.001-0.003-0.001
54
+ l-0.001-0.001c0.001-0.001-0.001-0.001-0.002-0.001c0,0-0.001,0-0.001-0.001c-0.001-0.001-0.003-0.001-0.004-0.001
55
+ s-0.003-0.001-0.004-0.001l-0.002-0.001c0,0-0.001,0-0.002-0.001l-0.002-0.001c-0.003-0.001-0.003-0.001-0.002-0.001
56
+ c-0.003,0-0.003,0-0.002-0.001c-0.001,0-0.001-0.001-0.001-0.001c-0.001,0-0.002-0.001-0.002-0.001h-0.001
57
+ c-0.059-0.021-0.122-0.034-0.188-0.037h-0.001c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.003,0h-0.001h-0.001h-0.001
58
+ c-0.001-0.001-0.001-0.001-0.002-0.001c0,0-0.001,0-0.002,0c0,0-0.001,0-0.002,0h-0.001c0,0-0.001,0-0.001,0h-0.001
59
+ c-0.001,0-0.002,0-0.002,0h-0.002c0,0,0,0-0.001,0c0,0-0.001,0-0.001,0h-0.001c0,0-0.001,0-0.001,0h-0.001h-0.001h-0.001H110.4
60
+ c0,0-0.001,0-0.001,0c-1.655,0-3.01-1.348-3.02-3V89.365h2.573c0.004,0,0.009,0,0.013,0c0.365-0.009,0.661-0.285,0.661-0.648
61
+ c0-0.271-0.166-0.503-0.402-0.6l-12.38-8.544c-0.221-0.153-0.515-0.153-0.737,0l-12.476,8.61c-0.234,0.161-0.335,0.456-0.251,0.727
62
+ c0.085,0.271,0.335,0.455,0.619,0.455h2.573l0.002,18.599c0.013,2.329,1.885,4.231,4.264,4.289
63
+ c0.026,0.003,0.052,0.004,0.078,0.004h18.481c0.004,0,0.007,0,0.011,0c0.17-0.003,0.324-0.071,0.438-0.18l0.001-0.001
64
+ c0.002-0.002,0.005-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003c0,0,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001
65
+ l0.001-0.001l0.001-0.001l0.001-0.001c0.003-0.001,0.001-0.001,0.002-0.002c0,0,0,0,0.001-0.001l0.001-0.001c0,0,0,0,0.001-0.001
66
+ c0.112-0.116,0.182-0.273,0.183-0.447v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002
67
+ C111.045,111.345,110.889,111.121,110.667,111.02z"/>
68
+ </g>
69
+ </svg>
@@ -0,0 +1,69 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
+ viewBox="0 0 141.732 141.747" enable-background="new 0 0 141.732 141.747" xml:space="preserve">
5
+ <g>
6
+ <path fill="#0071CE" d="M115.585,109.242c-1.609,0-3.107-1.024-3.635-2.637c-0.657-2.008,0.438-4.169,2.447-4.826
7
+ c7.278-2.382,11.98-8.761,11.98-16.252c0-9.487-7.718-17.206-17.205-17.206c-0.659,0-1.368,0.052-2.231,0.164l-3.741,0.485
8
+ l-0.537-3.735c-2.299-16.016-16.251-28.094-32.454-28.094c-13.395,0-25.32,8.019-30.377,20.43l-0.952,2.335l-2.52,0.046
9
+ c-11.581,0.213-21.003,9.804-21.003,21.379c0,8.45,4.906,16.156,12.498,19.631c1.921,0.88,2.766,3.15,1.886,5.071
10
+ c-0.88,1.921-3.149,2.764-5.07,1.887C14.363,103.202,7.703,92.766,7.703,81.331c0-14.88,11.465-27.345,26.028-28.876
11
+ c6.71-14.03,20.773-22.965,36.477-22.965c18.796,0,35.135,13.178,39.372,31.184c13.519,0.219,24.45,11.284,24.45,24.854
12
+ c0,10.693-6.934,20.146-17.253,23.523C116.382,109.18,115.98,109.242,115.585,109.242z"/>
13
+ <path fill="#DC8327" d="M57.12,111.02c-0.001-0.001-0.001-0.001-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001
14
+ c0,0-0.001-0.001-0.001-0.001l-0.001-0.001c0,0-0.001,0-0.001-0.001h-0.001l-0.001-0.001c0.001-0.001-0.001-0.001-0.001-0.001
15
+ l-0.001-0.001c0,0-0.001,0-0.001,0l-0.001-0.001c0.001,0.001-0.001-0.001-0.001-0.001s-0.002-0.001-0.003-0.001l-0.001-0.001H57.1
16
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.003-0.001-0.002-0.001-0.003-0.001c-0.001,0.001-0.001-0.001-0.002-0.001
17
+ l-0.001-0.001c0,0-0.001-0.001-0.002-0.001l-0.001-0.001c-0.001-0.001-0.003-0.001-0.004-0.001s-0.003-0.001-0.004-0.001
18
+ c-0.001-0.001-0.001-0.001-0.002-0.001h-0.001c-0.001-0.001-0.002-0.001-0.003-0.001c-0.001-0.001-0.003-0.001-0.003-0.001
19
+ c-0.001,0-0.001,0-0.001,0l-0.002-0.001c-0.001,0-0.001-0.001-0.001-0.001h-0.001c-0.059-0.021-0.122-0.034-0.188-0.037h-0.002
20
+ h-0.002c-0.001,0-0.001,0-0.002,0c0,0,0,0-0.001,0c0,0-0.001,0-0.001,0h-0.001c-0.001-0.001-0.001-0.001-0.001-0.001
21
+ c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.002,0h-0.001h-0.001h-0.001c-0.001,0-0.002,0-0.002,0h-0.001H56.86h-0.001h-0.001
22
+ c-0.001,0-0.001,0-0.001,0h-0.001h-0.001h-0.001h-0.001c-0.001,0-0.001,0-0.001,0c-1.656,0-3.011-1.348-3.021-3V74.29h2.567
23
+ c0.004,0,0.009,0,0.013,0c0.393,0.017,0.661-0.285,0.661-0.648c0-0.271-0.166-0.503-0.402-0.6l-12.379-8.544
24
+ c-0.222-0.153-0.515-0.153-0.737,0l-12.476,8.611c-0.234,0.161-0.335,0.456-0.251,0.727c0.085,0.271,0.335,0.455,0.619,0.455h2.58
25
+ l0.002,33.674c0.013,2.328,1.883,4.228,4.262,4.288c0.027,0.003,0.053,0.005,0.08,0.005h18.481c0.004,0,0.007,0,0.011,0
26
+ c0.17-0.003,0.324-0.071,0.438-0.18c0,0,0,0,0.001-0.001c0.002-0.002,0.004-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003
27
+ c0,0,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001l0.001-0.001l0.001-0.001c0.001-0.001,0.001-0.001,0.001-0.001
28
+ c0.002-0.001,0.001-0.001,0.002-0.002c0,0,0,0,0.001-0.001l0.001-0.001c0,0,0,0,0.001-0.001c0.112-0.116,0.182-0.273,0.183-0.447
29
+ v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002C57.498,111.345,57.343,111.121,57.12,111.02z"/>
30
+ <path fill="#F4B21B" d="M83.889,111.02c0,0-0.001-0.001-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001
31
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001c0,0-0.001-0.001-0.001-0.001
32
+ c0.001-0.001-0.001-0.001-0.002-0.001l-0.001-0.001h-0.001c-0.001,0-0.001-0.001-0.001-0.001c-0.002,0.001-0.002-0.001-0.002-0.001
33
+ l-0.002-0.001l-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001l-0.001-0.001c-0.001-0.001-0.002-0.001-0.002-0.001
34
+ c-0.001,0.001-0.001-0.001-0.003-0.001l-0.001-0.001l-0.001-0.001c0,0-0.001,0-0.002-0.001c-0.001-0.001-0.003-0.001-0.004-0.001
35
+ s-0.003-0.001-0.004-0.001c-0.001-0.001-0.001-0.001-0.002-0.001c-0.001,0-0.001,0-0.002-0.001c0,0-0.001,0-0.002-0.001
36
+ c-0.003-0.001-0.001-0.001-0.002-0.001c-0.003,0-0.001,0-0.002-0.001c0,0-0.001-0.001-0.002-0.001l-0.001-0.001h-0.001
37
+ c-0.059-0.021-0.122-0.034-0.188-0.037h-0.002c-0.001,0-0.001,0-0.001,0c-0.001,0-0.002,0-0.002,0s-0.001,0-0.001,0h-0.001h-0.001
38
+ l-0.001-0.001c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.002,0h-0.001c-0.001,0-0.001,0-0.001,0h-0.001
39
+ c-0.001,0-0.002,0-0.002,0s-0.001,0-0.002,0h-0.001c0,0-0.001,0-0.001,0h-0.001c-0.001,0-0.001,0-0.001,0h-0.001h-0.001h-0.001
40
+ h-0.001c-0.001,0-0.001,0-0.001,0c-1.655,0-3.01-1.348-3.02-3V81.829h2.579c0.009-0.001,0.016-0.001,0.026,0
41
+ c0.358,0,0.648-0.29,0.648-0.648c0-0.271-0.166-0.503-0.402-0.6l-12.38-8.544c-0.222-0.153-0.515-0.153-0.737,0L57.86,80.647
42
+ c-0.234,0.161-0.335,0.456-0.251,0.727c0.085,0.271,0.335,0.455,0.619,0.455h2.568l0.002,26.135
43
+ c0.011,2.329,1.884,4.23,4.264,4.289c0.026,0.003,0.052,0.004,0.078,0.004h18.481c0.004,0,0.007,0,0.011,0
44
+ c0.17-0.003,0.324-0.071,0.438-0.18c0,0,0,0,0.001-0.001c0.002-0.002,0.006-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003
45
+ c0.001-0.001,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001c0,0,0.001,0,0.001-0.001l0.001-0.001
46
+ c0.001,0,0.001-0.001,0.001-0.001c0.003-0.001,0.002-0.001,0.002-0.002c0,0,0,0,0.001-0.001c0,0,0,0,0.001-0.001
47
+ c0,0,0,0,0.001-0.001c0.112-0.116,0.182-0.273,0.183-0.447v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002
48
+ C84.267,111.345,84.112,111.121,83.889,111.02z"/>
49
+ <path fill="#F2D864" d="M110.667,111.02l-0.002-0.001c-0.001,0-0.002-0.001-0.003-0.001h-0.001
50
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.001,0-0.001,0-0.001-0.001h-0.001l-0.001-0.001
51
+ c-0.001-0.001-0.001-0.001-0.001-0.001s-0.001,0-0.001-0.001h-0.001c0,0-0.001-0.001-0.001-0.001
52
+ c-0.001,0.001-0.001-0.001-0.002-0.001c0.001-0.001-0.001-0.001-0.002-0.001l-0.001-0.001c-0.001,0-0.001,0-0.001,0
53
+ c-0.001-0.001-0.001-0.001-0.001-0.001l-0.001-0.001c-0.003-0.001-0.002-0.001-0.002-0.001c-0.001,0.001-0.001-0.001-0.003-0.001
54
+ l-0.001-0.001c0.001-0.001-0.001-0.001-0.002-0.001c0,0-0.001,0-0.001-0.001c-0.001-0.001-0.003-0.001-0.004-0.001
55
+ s-0.003-0.001-0.004-0.001l-0.002-0.001c0,0-0.001,0-0.002-0.001l-0.002-0.001c-0.003-0.001-0.003-0.001-0.002-0.001
56
+ c-0.003,0-0.003,0-0.002-0.001c-0.001,0-0.001-0.001-0.001-0.001c-0.001,0-0.002-0.001-0.002-0.001h-0.001
57
+ c-0.059-0.021-0.122-0.034-0.188-0.037h-0.001c-0.001,0-0.002,0-0.002,0c-0.001,0-0.002,0-0.003,0h-0.001h-0.001h-0.001
58
+ c-0.001-0.001-0.001-0.001-0.002-0.001c0,0-0.001,0-0.002,0c0,0-0.001,0-0.002,0h-0.001c0,0-0.001,0-0.001,0h-0.001
59
+ c-0.001,0-0.002,0-0.002,0h-0.002c0,0,0,0-0.001,0c0,0-0.001,0-0.001,0h-0.001c0,0-0.001,0-0.001,0h-0.001h-0.001h-0.001H110.4
60
+ c0,0-0.001,0-0.001,0c-1.655,0-3.01-1.348-3.02-3V89.365h2.573c0.004,0,0.009,0,0.013,0c0.365-0.009,0.661-0.285,0.661-0.648
61
+ c0-0.271-0.166-0.503-0.402-0.6l-12.38-8.544c-0.221-0.153-0.515-0.153-0.737,0l-12.476,8.61c-0.234,0.161-0.335,0.456-0.251,0.727
62
+ c0.085,0.271,0.335,0.455,0.619,0.455h2.573l0.002,18.599c0.013,2.329,1.885,4.231,4.264,4.289
63
+ c0.026,0.003,0.052,0.004,0.078,0.004h18.481c0.004,0,0.007,0,0.011,0c0.17-0.003,0.324-0.071,0.438-0.18l0.001-0.001
64
+ c0.002-0.002,0.005-0.004,0.005-0.005c0.001-0.001,0.002-0.001,0.003-0.003c0,0,0.001-0.001,0.001-0.001l0.001-0.001l0.001-0.001
65
+ l0.001-0.001l0.001-0.001l0.001-0.001c0.003-0.001,0.001-0.001,0.002-0.002c0,0,0,0,0.001-0.001l0.001-0.001c0,0,0,0,0.001-0.001
66
+ c0.112-0.116,0.182-0.273,0.183-0.447v-0.002v-0.001v-0.001v-0.001v-0.001v-0.001v-0.001v-0.002
67
+ C111.045,111.345,110.889,111.121,110.667,111.02z"/>
68
+ </g>
69
+ </svg>
package/docs/360.html ADDED
@@ -0,0 +1,102 @@
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
+ <script type="text/javascript" src="./scripts.js"></script>
8
+
9
+ <!--
10
+ We're loading scripts & style dynamically for development/testing.
11
+ Real-world usage would look like this:
12
+
13
+ <link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">
14
+
15
+ <script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.js"></script>
16
+ <script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"></script>
17
+
18
+ -->
19
+
20
+ <script>
21
+ // Delayed, load after cld-video-player.js
22
+ loadScript('https://unpkg.com/videojs-vr@1.7.1/dist/videojs-vr.js');
23
+ </script>
24
+
25
+ <script type="text/javascript">
26
+ window.addEventListener('load', function(){
27
+
28
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'benco' });
29
+
30
+ player = cld.videoPlayer('player', {
31
+ publicId: '360/Golden-Gate-Bridge',
32
+ sourceTypes: ['mp4'],
33
+ transformation: {
34
+ width: 950,
35
+ vc: "auto"
36
+ }
37
+ });
38
+ player.videojs.vr({projection: '360'});
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">360 Videos</h3>
50
+
51
+ <video
52
+ id="player"
53
+ playsinline
54
+ controls
55
+ muted
56
+ crossorigin="anonymous"
57
+ class="cld-video-player"
58
+ width="500">
59
+ </video>
60
+
61
+ <p class="mt-4">
62
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
63
+ </p>
64
+
65
+ <h3 class="mt-4">Example Code:</h3>
66
+ <pre>
67
+ <code class="language-html">
68
+ &lt;video
69
+ id="player"
70
+ controls
71
+ autoplay
72
+ class="cld-video-player"
73
+ width="500"&gt;
74
+ &lt;/video&gt;
75
+ </code>
76
+ <code class="language-javascript">
77
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
78
+
79
+ player = cld.videoPlayer('player', {
80
+ publicId: '360/Golden-Gate-Bridge',
81
+ sourceTypes: ['mp4'],
82
+ transformation: {
83
+ width: 950,
84
+ vc: "auto"
85
+ }
86
+ });
87
+ player.videojs.vr({projection: '360'});
88
+ </code>
89
+ </pre>
90
+ </div>
91
+
92
+ <!-- Bootstrap -->
93
+ <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">
94
+
95
+ <!-- highlight.js -->
96
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
97
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-vr@1.5.0/dist/videojs-vr.css">
98
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
99
+ <script>hljs.initHighlightingOnLoad();</script>
100
+
101
+ </body>
102
+ </html>
@@ -0,0 +1,93 @@
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
+ publicId: 'snow_horses',
36
+ info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
37
+ });
38
+
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">TITLE</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
+
61
+ <p class="mt-4">
62
+ <a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
63
+ </p>
64
+
65
+ <h3 class="mt-4">Example Code:</h3>
66
+ <pre>
67
+ <code class="language-html">
68
+ &lt;video
69
+ id="player"
70
+ controls
71
+ muted
72
+ autoplay
73
+ class="cld-video-player"
74
+ width="500"
75
+ &gt;&lt;/video&gt;
76
+ </code>
77
+ <code class="language-javascript">
78
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });
79
+
80
+ // Initialize player
81
+ var player = cld.videoPlayer('player');
82
+
83
+ // Define source
84
+ var source = { publicId: 'snow_horses', info: { title: 'Snow Horses', subtitle: 'A movie about horses' } };
85
+
86
+ // Play source
87
+ player.source(source);
88
+ </code>
89
+ </pre>
90
+ </div>
91
+
92
+ </body>
93
+ </html>
@@ -0,0 +1,297 @@
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
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.9.3/dash.all.min.js"></script>
27
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.11.0/videojs-dash.js"></script>
28
+
29
+ -->
30
+
31
+ <script type="text/javascript" src="./scripts.js"></script>
32
+ <script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.20/src/ua-parser.min.js"></script>
33
+
34
+ <script>
35
+ window.addEventListener('load', function () {
36
+ var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo', secure: true});
37
+ var uap = new UAParser(navigator.userAgent);
38
+ playerHls = cld.videoPlayer('example-player-hls');
39
+ playerHlsH265 = cld.videoPlayer('example-player-hls-h265');
40
+ playerDash = cld.videoPlayer('example-player-dash');
41
+ playerDashVp9 = cld.videoPlayer('example-player-dash-vp9');
42
+ playerHlsNoCodec = cld.videoPlayer('example-player-hls-no-codec');
43
+ playerDashNoCodec = cld.videoPlayer('example-player-dash-no-codec');
44
+ playerHlsIos = cld.videoPlayer('example-player-hls-ios', {
45
+ html5: {
46
+ hls: {
47
+ overrideNative: true
48
+ }
49
+ }
50
+ });
51
+
52
+ playerHls.source(
53
+ 'sea_turtle',
54
+ {
55
+ sourceTypes: ['hls'],
56
+ transformation: {streaming_profile: 'hd'},
57
+ info: {title: 'HLS'}
58
+ }
59
+ );
60
+ playerHlsH265.source(
61
+ 'sea_turtle',
62
+ {
63
+ sourceTypes: ['hls/h265'],
64
+ transformation: {streaming_profile: 'h265_full_hd'},
65
+ info: {title: 'HLS 265'}
66
+ }
67
+ );
68
+ playerDash.source(
69
+ 'sea_turtle',
70
+ {
71
+ sourceTypes: ['dash/h264'],
72
+ transformation: {streaming_profile: 'hd'},
73
+ info: {title: 'MPEG-DASH'}
74
+ }
75
+ );
76
+ playerDashVp9.source(
77
+ 'sea_turtle',
78
+ {
79
+ sourceTypes: ['dash/vp9'],
80
+ transformation: {streaming_profile: 'vp9_full_hd'},
81
+ info: {title: 'MPEG-DASH vp9'}
82
+ }
83
+ );
84
+ playerHlsNoCodec.source(
85
+ 'sea_turtle',
86
+ {
87
+ sourceTypes: ['hls'],
88
+ info: {title: 'HLS'}
89
+ }
90
+ );
91
+ playerDashNoCodec.source(
92
+ 'sea_turtle',
93
+ {
94
+ sourceTypes: ['dash'],
95
+ info: {title: 'MPEG-DASH'}
96
+ }
97
+ );
98
+ playerHlsIos.source(
99
+ 'sea_turtle',
100
+ {
101
+ sourceTypes: ['hls'],
102
+ transformation: {streaming_profile: 'hd'},
103
+ info: {title: 'HLS'}
104
+ }
105
+ );
106
+
107
+ playerHls.on('qualitychanged', function(data) {
108
+ console.log('HLS player', data);
109
+ });
110
+ playerHls.videojs.on('playing', function() {
111
+ document.getElementById('info-hls').innerHTML = uap.getBrowser().name + ' is playing ' + playerHls.videojs.currentSrc();
112
+ });
113
+ playerHls.on('error', function() {
114
+ console.log(playerHls.videojs.error());
115
+ })
116
+ playerHlsH265.videojs.on('playing', function() {
117
+ document.getElementById('info-hls-h265').innerHTML = uap.getBrowser().name + ' is playing ' + playerHlsH265.videojs.currentSrc();
118
+ });
119
+ playerDash.on('qualitychanged', function(data) {
120
+ console.log('Dash player', data);
121
+ });
122
+ playerDash.videojs.on('playing', function() {
123
+ document.getElementById('info-dash').innerHTML = uap.getBrowser().name + ' is playing ' + playerDash.videojs.currentSrc();
124
+ });
125
+ playerDashVp9.videojs.on('playing', function() {
126
+ document.getElementById('info-dash-vp9').innerHTML = uap.getBrowser().name + ' is playing ' + playerDashVp9.videojs.currentSrc();
127
+ });
128
+ playerHlsNoCodec.videojs.on('playing', function() {
129
+ document.getElementById('info-hls-no-codec').innerHTML = uap.getBrowser().name + ' is playing ' + playerHlsNoCodec.videojs.currentSrc();
130
+ });
131
+ playerDashNoCodec.videojs.on('playing', function() {
132
+ document.getElementById('info-dash-no-codec').innerHTML = uap.getBrowser().name + ' is playing ' + playerDashNoCodec.videojs.currentSrc();
133
+ });
134
+ }, false);
135
+ </script>
136
+
137
+ </head>
138
+
139
+ <body>
140
+
141
+ <div class="container p-4 col-12 col-md-9 col-xl-6">
142
+ <nav class="nav mb-2">
143
+ <a href="./index.html">&#60;&#60; Back to examples index</a>
144
+ </nav>
145
+ <h1>Cloudinary Video Player</h1>
146
+ <h3 class="mb-4">Adaptive streaming</h3>
147
+
148
+ <div class="video-container mb-4">
149
+ <h4>HLS 264</h4>
150
+ <video
151
+ id="example-player-hls"
152
+ playsinline
153
+ controls
154
+ muted
155
+ width="500"
156
+ class="cld-video-player"
157
+ ></video>
158
+ <span id="info-hls"></span>
159
+ </div>
160
+
161
+ <div class="video-container mb-4">
162
+ <h4>HLS 265</h4>
163
+ <video
164
+ id="example-player-hls-h265"
165
+ controls
166
+ muted
167
+ width="500"
168
+ class="cld-video-player">
169
+ </video>
170
+ <span id="info-hls-h265"></span>
171
+ </div>
172
+
173
+ <div class="video-container mb-4">
174
+ <h4>MPEG-DASH h264</h4>
175
+ <video
176
+ id="example-player-dash"
177
+ playsinline
178
+ controls
179
+ muted
180
+ width="500"
181
+ class="cld-video-player">
182
+ </video>
183
+ <span id="info-dash"></span>
184
+ </div>
185
+
186
+ <div class="video-container mb-4">
187
+ <h4>MPEG-DASH vp9</h4>
188
+ <video
189
+ id="example-player-dash-vp9"
190
+ playsinline
191
+ controls
192
+ muted
193
+ width="500"
194
+ class="cld-video-player">
195
+ </video>
196
+ <span id="info-dash-vp9"></span>
197
+ </div>
198
+
199
+ <div class="video-container mb-4">
200
+ <h4>HLS no codec</h4>
201
+ <video
202
+ id="example-player-hls-no-codec"
203
+ playsinline
204
+ controls
205
+ muted
206
+ width="500"
207
+ class="cld-video-player">
208
+ </video>
209
+ <span id="info-hls-no-codec"></span>
210
+ </div>
211
+
212
+ <div class="video-container mb-4">
213
+ <h4>DASH no codec</h4>
214
+ <video
215
+ id="example-player-dash-no-codec"
216
+ playsinline
217
+ controls
218
+ muted
219
+ width="500"
220
+ class="cld-video-player">
221
+ </video>
222
+ <span id="info-dash-no-codec"></span>
223
+ </div>
224
+
225
+ <div class="video-container mb-4">
226
+ <h4>HLS 264 safari ios native override</h4>
227
+ <video
228
+ id="example-player-hls-ios"
229
+ playsinline
230
+ controls
231
+ muted
232
+ width="500"
233
+ class="cld-video-player">
234
+ </video>
235
+ <span id="info-hls-ios"></span>
236
+ </div>
237
+
238
+ <p class="mt-4">
239
+ <a href="https://cloudinary.com/documentation/video_player_hls_dash">Adaptive streaming documentation</a>
240
+ </p>
241
+
242
+ <h3>Example Code:</h3>
243
+ <pre>
244
+ <code class="language-html">
245
+ &lt;video
246
+ id="example-player-hls"
247
+ controls
248
+ autoplay
249
+ muted
250
+ width="500"
251
+ class="cld-video-player"&gt;
252
+ &lt;/video&gt;
253
+
254
+ &lt;video
255
+ id="example-player-dash"
256
+ controls
257
+ autoplay
258
+ muted
259
+ width="500"
260
+ class="cld-video-player"&gt;
261
+ &lt;/video&gt;
262
+ </code>
263
+ <code class="language-javascript">
264
+ var cld = cloudinary.Cloudinary.new({cloud_name: 'demo'});
265
+ var playerHls = cld.videoPlayer('example-player-hls');
266
+ var playerDash = cld.videoPlayer('example-player-dash');
267
+
268
+ playerHls.source(
269
+ 'sea_turtle',
270
+ {
271
+ sourceTypes: ['hls'],
272
+ transformation: {streaming_profile: 'hd'},
273
+ info: {title: 'HLS'}
274
+ }
275
+ );
276
+ playerDash.source(
277
+ 'sea_turtle',
278
+ {
279
+ sourceTypes: ['dash'],
280
+ transformation: {streaming_profile: 'hd'},
281
+ info: {title: 'MPEG-DASH'}
282
+ }
283
+ );
284
+
285
+ playerHls.on('qualitychanged', (data) => {
286
+ console.log('HLS player', data);
287
+ });
288
+ playerDash.on('qualitychanged', (data) => {
289
+ console.log('Dash player', data);
290
+ });
291
+ </code>
292
+ </pre>
293
+ </div>
294
+
295
+ </body>
296
+
297
+ </html>