This WebComponent allows you to embed the Cloudinary Video Player to your application.
As Cloudinary Video Player third party library does not expose anything and scope directly the main object to window
, you must include the following tags in your HTML:
<link href="node_modules/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="node_modules/lodash/lodash.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
<script src="node_modules/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>
or CDN version
<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js" type="text/javascript"></script>
Please refer to the official Cloudinary Video Player API documentation or npm package for more information.
If Cloudinary library has not loaded correctly on your page, the video player will load the native HTML5 video player of your browser as fallback.
That is why it is necessary to add the url-transformation="w_940,h_354,c_limit"
attribute.
See accepted attributes.
<cld-video cloud-name="lightways" url-transformation="w_940,h_354,c_limit" video-id="video-123" video-title="My great video" public-id="folder/cl_public_id" width=940 height=354 crop="limit" controls></cld-video>
- Put a script tag similar to this
<script src='https://unpkg.com/stencil-cloudinary-video-player@1.0.0/dist/cld-video.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm install stencil-cloudinary-video-player --save
- Put a script tag similar to this
<script src='node_modules/stencil-cloudinary-video-player/dist/cld-video.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm install stencil-cloudinary-video-player --save
- Add an import to the npm packages
import stencil-cloudinary-video-player;
- Then you can use the element anywhere in your template, JSX, html etc