Merge pull request #71 from asad-rafter/CLD-280-video-player-links

Enhance the web performance of the video player

Author: yuval-cloudinary

cartridges/int_cloudinary/cartridge/scripts/model/cloudinaryModel.js

@@ -251,7 +251,7 @@ var getCloudinaryVideo = function (productID, currentLocale) {
                             posterTransformation.push({
                                 raw_transformation: videoPosterTransforamtion
                             })
-                            widgetOptions.posterOptions = { transformation: posterTrans };
+                            widgetOptions.posterOptions = { transformation: posterTransformation };
                         }
                     }
 

cartridges/int_cloudinary/cartridge/templates/default/content/renderContentVideo.isml

@@ -2,12 +2,13 @@
     A general template to render cloudinary video player
     for content assets and other static pages.
 </iscomment>
+
 <isset name="cloudinaryStaticContent" value="${pdict.cloudinaryStaticContent}" scope="page"/>
 <isif condition="${cloudinaryStaticContent.isEnabled && cloudinaryStaticContent.video.videoURL && cloudinaryStaticContent.video.videoURL !== '' && cloudinaryStaticContent.video.videoURL !== 'null'}">
     <isif condition="${cloudinaryStaticContent.videoEnabled && cloudinaryStaticContent.videoPlayerEnabled}">
         <isset name="preferences" value="${dw.system.Site.current.preferences.custom}" scope="page"/>
         <link href="${preferences.CLDVideoPlayerCSSURL}" rel="stylesheet"/>
-        <script src="${preferences.CLDVideoPlayerJSURL}"></script>
+        <script defer="defer" src="${preferences.CLDVideoPlayerJSURL}" onload="window.cldVideoPlayer = cloudinary.Cloudinary;"></script>
 
         <isset name="randomNumber" value="${cloudinaryStaticContent.randomNumber}" scope="page" />
         <video id="cld-video-player-${randomNumber}" class="cld-video-player cloudinary-data-container"

cartridges/int_cloudinary/cartridge/templates/default/experience/pages/cloudinaryVideo.isml

@@ -1,9 +1,12 @@
 <isif condition="${pdict.cloudinary.isEnabled && pdict.cloudinary.videoEnabled && pdict.cloudinary.videoPlayerEnabled &&
     pdict.cloudinary.video && pdict.cloudinary.video.videoURL && pdict.cloudinary.video.videoURL !== 'null' &&
     pdict.cloudinary.video.videoURL !== ''}">
+    <isset name="cloudinaryConstants" value="${require('*/cartridge/scripts/util/cloudinaryConstants')}" scope="page" />
+    <link href="${dw.system.Site.current.preferences.custom.CLDVideoPlayerCSSURL}" rel="stylesheet"/>
+    <script defer="defer" src="${dw.system.Site.current.preferences.custom.CLDVideoPlayerJSURL}" onload="window.cldVideoPlayer = cloudinary.Cloudinary;"></script>
     <div class="primary-videos col-12 col-sm-6">
         <div id='pdp-video-<isprint value="${cldProductID}">'>
-            <video id="cld-video-player" class="cld-video-player"></video>
+            <video id="cld-video-player" class="cld-video-player" data-cloudinary="${JSON.stringify(pdict.cloudinary.video.widgetOptions)}"></video>
         </div>
     </div>
 </isif>

cartridges/int_cloudinary/cartridge/templates/default/include/cloudinaryStaticLibs.isml

@@ -17,13 +17,6 @@
         <link rel="preconnect" href="${'https://' + cloudinaryConstants.CLD_GALLERY_JS_URL_DOMAIN}" />
     </isif>
     <script src="${URLUtils.staticURL('/js/cloudinaryWidgets.js')}"></script>
-    <isif condition="${preferences.CLDVideoEnabled && preferences.CLDVideoPlayerEnabled}">
-        <link href="${preferences.CLDVideoPlayerCSSURL}" rel="stylesheet"/>
-        <script src="${preferences.CLDVideoPlayerJSURL}"></script>
-        <script>
-            window.cldVideoPlayer = cloudinary.Cloudinary;
-        </script>
-    </isif>
     <isif condition="${(CLDImagePageTypeSettings.miniCart.enabled && CLDImagePageTypeSettings.miniCart.automateResponsivenessWithJS) || (CLDImagePageTypeSettings.searchSuggestions.enabled && CLDImagePageTypeSettings.searchSuggestions.automateResponsivenessWithJS)}">
         <isinclude template="include/cloudinaryShrinkwrap"/>
     </isif>