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.
- package/.eslintignore +4 -0
- package/.snyk +19 -0
- package/.travis.yml +8 -0
- package/CHANGELOG.md +329 -0
- package/LICENSE +21 -0
- package/README.md +87 -0
- package/dist/cld-video-player.css +2110 -0
- package/dist/cld-video-player.js +5249 -0
- package/dist/cld-video-player.light.css +1766 -0
- package/dist/cld-video-player.light.js +1399 -0
- package/dist/cld-video-player.light.min.css +1 -0
- package/dist/cld-video-player.light.min.js +2 -0
- package/dist/cld-video-player.light.min.js.LICENSE.txt +23 -0
- package/dist/cld-video-player.min.css +1 -0
- package/dist/cld-video-player.min.js +2 -0
- package/dist/cld-video-player.min.js.LICENSE.txt +26 -0
- package/dist/fonts/cloudinary_icon_for_black_bg.svg +69 -0
- package/dist/fonts/cloudinary_icon_for_white_bg.svg +69 -0
- package/docs/360.html +102 -0
- package/docs/_template.html +93 -0
- package/docs/adaptive-streaming.html +297 -0
- package/docs/analytics.html +140 -0
- package/docs/api.html +302 -0
- package/docs/audio.html +136 -0
- package/docs/autoplay-fallback.html +138 -0
- package/docs/autoplay-on-scroll.html +107 -0
- package/docs/codec-fallback.html +158 -0
- package/docs/colors.html +135 -0
- package/docs/components.html +284 -0
- package/docs/custom-cld-errors.html +134 -0
- package/docs/floating-player.html +98 -0
- package/docs/fluid.html +117 -0
- package/docs/force-hls-subtitles-ios.html +159 -0
- package/docs/index.html +83 -0
- package/docs/interaction-area.html +398 -0
- package/docs/live-customer.html +128 -0
- package/docs/multiple-players.html +125 -0
- package/docs/playlist-by-tag-cap.html +182 -0
- package/docs/playlist-by-tag.html +133 -0
- package/docs/playlist.html +133 -0
- package/docs/poster.html +155 -0
- package/docs/raw-url.html +104 -0
- package/docs/recommendations.html +155 -0
- package/docs/scripts.js +156 -0
- package/docs/seek-thumbs.html +90 -0
- package/docs/shoppable.html +335 -0
- package/docs/subtitles-and-captions.html +267 -0
- package/docs/transformations.html +171 -0
- package/docs/ui-config.html +108 -0
- package/docs/vast-vpaid.html +149 -0
- package/env.example.js +6 -0
- package/env.js +6 -0
- package/jest-puppeteer.config.js +14 -0
- package/jest.config.js +196 -0
- package/package.json +99 -0
- package/sandbox.config.json +3 -0
- package/setupJest.js +1 -0
- package/src/assets/fonts/VideoJS.svg +120 -0
- package/src/assets/fonts/VideoJS.ttf +0 -0
- package/src/assets/fonts/VideoJS.woff +0 -0
- package/src/assets/fonts/icons.json +120 -0
- package/src/assets/icons/cloudinary_icon_for_black_bg.svg +69 -0
- package/src/assets/icons/cloudinary_icon_for_white_bg.svg +69 -0
- package/src/assets/icons/cloudinary_logo_for_dark_bg.svg +188 -0
- package/src/assets/icons/cloudinary_logo_for_white_bg.svg +188 -0
- package/src/assets/icons/info-circle.svg +17 -0
- package/src/assets/styles/ads-label.scss +16 -0
- package/src/assets/styles/components/interaction-areas.scss +158 -0
- package/src/assets/styles/components/playlist.scss +213 -0
- package/src/assets/styles/components/themedButton.scss +48 -0
- package/src/assets/styles/components/thumbnail.scss +94 -0
- package/src/assets/styles/components/title-bar.scss +67 -0
- package/src/assets/styles/components/triangle-volume-bar.scss +52 -0
- package/src/assets/styles/icons.scss +257 -0
- package/src/assets/styles/main.scss +324 -0
- package/src/assets/styles/mixins/aspect-ratio.scss +16 -0
- package/src/assets/styles/mixins/disable-transition.scss +3 -0
- package/src/assets/styles/mixins/mixins.scss +5 -0
- package/src/assets/styles/mixins/skin.scss +64 -0
- package/src/assets/styles/variables.scss +2 -0
- package/src/assets/styles/videojs-ima.scss +252 -0
- package/src/components/component-utils.js +20 -0
- package/src/components/index.js +21 -0
- package/src/components/interaction-area/interaction-area.const.js +30 -0
- package/src/components/interaction-area/interaction-area.service.js +223 -0
- package/src/components/interaction-area/interaction-area.utils.js +236 -0
- package/src/components/jumpButtons/jump-10-minus.js +21 -0
- package/src/components/jumpButtons/jump-10-plus.js +20 -0
- package/src/components/logoButton/logo-button.const.js +3 -0
- package/src/components/logoButton/logo-button.js +30 -0
- package/src/components/logoButton/logo-button.scss +15 -0
- package/src/components/playlist/components/playlist-button.js +34 -0
- package/src/components/playlist/components/playlist-next-button.js +18 -0
- package/src/components/playlist/components/playlist-previous-button.js +18 -0
- package/src/components/playlist/components/playlist.js +5 -0
- package/src/components/playlist/components/playlist.scss +15 -0
- package/src/components/playlist/components/upcoming-video-overlay.js +149 -0
- package/src/components/playlist/components/upcoming-video-overlay.scss +86 -0
- package/src/components/playlist/layout/playlist-layout-custom.js +21 -0
- package/src/components/playlist/layout/playlist-layout-horizontal.js +16 -0
- package/src/components/playlist/layout/playlist-layout-vertical.js +19 -0
- package/src/components/playlist/layout/playlist-layout.js +110 -0
- package/src/components/playlist/panel/playlist-panel-item.js +86 -0
- package/src/components/playlist/panel/playlist-panel.js +92 -0
- package/src/components/playlist/playlist-widget.js +119 -0
- package/src/components/playlist/playlist.const.js +14 -0
- package/src/components/playlist/playlist.js +413 -0
- package/src/components/playlist/thumbnail/thumbnail.js +69 -0
- package/src/components/progress-control-events-blocker/progress-control-events-blocker.js +17 -0
- package/src/components/qualitySelector/quality-selector.scss +10 -0
- package/src/components/qualitySelector/qualitySelector.js +152 -0
- package/src/components/recommendations-overlay/index.js +3 -0
- package/src/components/recommendations-overlay/recommendations-overlay-content.js +57 -0
- package/src/components/recommendations-overlay/recommendations-overlay-hide-button.js +18 -0
- package/src/components/recommendations-overlay/recommendations-overlay-item.js +35 -0
- package/src/components/recommendations-overlay/recommendations-overlay-primary-item.js +81 -0
- package/src/components/recommendations-overlay/recommendations-overlay-secondary-item.js +48 -0
- package/src/components/recommendations-overlay/recommendations-overlay-secondary-items-container.js +35 -0
- package/src/components/recommendations-overlay/recommendations-overlay.js +94 -0
- package/src/components/recommendations-overlay/recommendations-overlay.scss +182 -0
- package/src/components/shoppable-bar/layout/bar-layout.js +111 -0
- package/src/components/shoppable-bar/layout/shoppable-panel-toggle.js +64 -0
- package/src/components/shoppable-bar/layout/shoppable-products-overlay.js +87 -0
- package/src/components/shoppable-bar/panel/shoppable-panel-item.js +105 -0
- package/src/components/shoppable-bar/panel/shoppable-panel.js +172 -0
- package/src/components/shoppable-bar/shoppable-post-widget.js +110 -0
- package/src/components/shoppable-bar/shoppable-widget.const.js +52 -0
- package/src/components/shoppable-bar/shoppable-widget.js +111 -0
- package/src/components/shoppable-bar/shoppable-widget.scss +359 -0
- package/src/components/themeButton/themedButton.const.js +3 -0
- package/src/components/themeButton/themedButton.js +25 -0
- package/src/components/title-bar/title-bar.js +79 -0
- package/src/config/defaults.js +25 -0
- package/src/extended-events.js +228 -0
- package/src/index.js +18 -0
- package/src/mixins/eventable.js +54 -0
- package/src/mixins/playlistable.js +106 -0
- package/src/plugins/analytics/index.js +245 -0
- package/src/plugins/autoplay-on-scroll/index.js +86 -0
- package/src/plugins/cloudinary/common.js +216 -0
- package/src/plugins/cloudinary/event-handler-registry.js +46 -0
- package/src/plugins/cloudinary/index.js +345 -0
- package/src/plugins/cloudinary/models/audio-source/audio-source.const.js +11 -0
- package/src/plugins/cloudinary/models/audio-source/audio-source.js +82 -0
- package/src/plugins/cloudinary/models/base-source.js +107 -0
- package/src/plugins/cloudinary/models/image-source.js +26 -0
- package/src/plugins/cloudinary/models/video-source/video-source.const.js +32 -0
- package/src/plugins/cloudinary/models/video-source/video-source.js +239 -0
- package/src/plugins/cloudinary/models/video-source/video-source.utils.js +57 -0
- package/src/plugins/colors/index.js +303 -0
- package/src/plugins/context-menu/components/context-menu-item.js +12 -0
- package/src/plugins/context-menu/components/context-menu.js +63 -0
- package/src/plugins/context-menu/context-menu.scss +30 -0
- package/src/plugins/context-menu/contextMenuContent.js +53 -0
- package/src/plugins/context-menu/index.js +134 -0
- package/src/plugins/dash/index.js +26 -0
- package/src/plugins/dash/setup-audio-tracks.js +112 -0
- package/src/plugins/dash/setup-text-tracks.js +195 -0
- package/src/plugins/dash/videojs-dash.js +372 -0
- package/src/plugins/floating-player/floating-player.scss +74 -0
- package/src/plugins/floating-player/index.js +129 -0
- package/src/plugins/ima/index.js +1775 -0
- package/src/plugins/index.js +31 -0
- package/src/plugins/interactive-plugin/index.js +10 -0
- package/src/plugins/videojs-http-source-selector/components/SourceMenuButton.js +98 -0
- package/src/plugins/videojs-http-source-selector/components/SourceMenuItem.js +52 -0
- package/src/plugins/videojs-http-source-selector/plugin.js +82 -0
- package/src/plugins/videojs-http-source-selector/plugin.scss +9 -0
- package/src/plugins/vtt-thumbnails/index.js +526 -0
- package/src/plugins/vtt-thumbnails/vtt-thumbnails.scss +29 -0
- package/src/utils/api.js +32 -0
- package/src/utils/apply-with-props.js +32 -0
- package/src/utils/array.js +22 -0
- package/src/utils/assign.js +27 -0
- package/src/utils/attributes-normalizer.js +72 -0
- package/src/utils/cloudinary.js +165 -0
- package/src/utils/css-prefix.js +43 -0
- package/src/utils/dom.js +74 -0
- package/src/utils/find.js +28 -0
- package/src/utils/fontFace.js +25 -0
- package/src/utils/groupBy.js +12 -0
- package/src/utils/index.js +29 -0
- package/src/utils/matches.js +11 -0
- package/src/utils/mixin.js +5 -0
- package/src/utils/object.js +26 -0
- package/src/utils/playButton.js +9 -0
- package/src/utils/positioning.js +78 -0
- package/src/utils/querystring.js +12 -0
- package/src/utils/slicing.js +21 -0
- package/src/utils/string.js +15 -0
- package/src/utils/throttle.js +30 -0
- package/src/utils/time.js +77 -0
- package/src/utils/type-inference.js +35 -0
- package/src/validators/validators-functions.js +48 -0
- package/src/validators/validators-types.js +78 -0
- package/src/validators/validators.js +110 -0
- package/src/video-player.const.js +68 -0
- package/src/video-player.js +761 -0
- package/src/video-player.utils.js +123 -0
- package/test/adaptive-streaming.test.js +38 -0
- package/test/ads.test.js +35 -0
- package/test/analytics.test.js +111 -0
- package/test/api.test.js +111 -0
- package/test/autoplay.scroll.test.js +23 -0
- package/test/basic-ui.test.js +59 -0
- package/test/colors.test.js +58 -0
- package/test/components.test.js +21 -0
- package/test/custom-error.test.js +24 -0
- package/test/fluid.test.js +36 -0
- package/test/isValidConfig.test.js +224 -0
- package/test/mocks/cloudinary-core-mock.js +0 -0
- package/test/mocks/styleMock.js +1 -0
- package/test/multiplayer.test.js +25 -0
- package/test/playlist.test.js +60 -0
- package/test/puppeteer/vp-env.js +19 -0
- package/test/recommendations.test.js +38 -0
- package/test/title-bar.test.js +28 -0
- package/test/ui-conf.test.js +49 -0
- package/test/unit/cloudinaryConfig.test.js +22 -0
- package/test/unit/cloudinaryUtils.test.js +53 -0
- package/test/unit/utils.test.js +27 -0
- package/test/unit/videoSource.test.js +454 -0
- package/tsconfig.json +15 -0
- package/types/video-player-tests.js +12 -0
- package/types/video-player-tests.ts +31 -0
- 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"><< 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
|
+
<video
|
|
69
|
+
id="player"
|
|
70
|
+
controls
|
|
71
|
+
autoplay
|
|
72
|
+
class="cld-video-player"
|
|
73
|
+
width="500">
|
|
74
|
+
</video>
|
|
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"><< 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
|
+
<video
|
|
69
|
+
id="player"
|
|
70
|
+
controls
|
|
71
|
+
muted
|
|
72
|
+
autoplay
|
|
73
|
+
class="cld-video-player"
|
|
74
|
+
width="500"
|
|
75
|
+
></video>
|
|
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"><< 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
|
+
<video
|
|
246
|
+
id="example-player-hls"
|
|
247
|
+
controls
|
|
248
|
+
autoplay
|
|
249
|
+
muted
|
|
250
|
+
width="500"
|
|
251
|
+
class="cld-video-player">
|
|
252
|
+
</video>
|
|
253
|
+
|
|
254
|
+
<video
|
|
255
|
+
id="example-player-dash"
|
|
256
|
+
controls
|
|
257
|
+
autoplay
|
|
258
|
+
muted
|
|
259
|
+
width="500"
|
|
260
|
+
class="cld-video-player">
|
|
261
|
+
</video>
|
|
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>
|