Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization

At Cloudinary, we make developers’ lives easier by providing tools to help automate, manage and deliver media assets. The Cloudinary Product Gallery is an interactive and customizable user interface that you can easily add to any website with a few lines of code. The gallery can display a variety of different media types for showcasing your products. This includes offering an assortment of high quality images taken from a variety of angles, adding zoom functionality for focusing on small details, displaying videos showing the use of the products in their real environment, and even including interactive 360 spin and 3D object models of your product.

The latest version of the Product Gallery widget now includes built-in support for the Cloudinary Video Player. This means all the videos played in the Product Gallery can also take advantage of the Video Player’s many valuable customization and integration capabilities, and the fact that it is monetization and analytics-ready.

Some of the features that the Cloudinary Video Player brings to the table include:

• Customizable: HTML5 video controls, the player’s color schemes, playlists, and themes.
• Monetization: post Google Adsense or DoubleClick ads with banners.
• Support for numerous video formats and autoselection of the best format for the user’s browser.
• Analytics: track user engagement by monitoring events that can be automatically sent directly to analysis systems such as Google Analytics.
• Ability to track video quality changes for adaptive bitrate streaming.
• Option to add subtitles and captions.
• Support for HTML5 responsive video.
• Support for HTML5 video live-streaming.

To use the Cloudinary Video Player within the Product Gallery, set the new playerType property of the videoProps parameter to ‘cloudinary’. This is a global setting for the Product Gallery and affects all videos played within the Product Gallery. For example, to use the Cloudinary Video Player to play all the video assets:

const myGallery= cloudinary.galleryWidget({ 
  container: "#my-gallery", 
  cloudName: "demo", 
  mediaAssets: [
    { publicId: "dog", mediaType: "video" },
    { publicId: "cat", mediaType: "video" }
  ],
  videoProps: { playerType: "cloudinary" }  
});
Code language: JavaScript (javascript)

You will probably also want to configure and customize the Cloudinary Video Player for the Product Gallery widget by also including any of the Video Player configuration options in the videoProps parameter. All the configuration options added to the videoProps parameter will affect all the videos played within the Product Gallery.

For example, to show jump control buttons, allowing the user to skip forward or back 10 seconds, include the showJumpControls parameter set to ‘true’:

const myGallery = cloudinary.galleryWidget({ 
  container: "#my-gallery", 
  cloudName: "demo", 
  mediaAssets: [{ publicId: "dog", mediaType: "video" }],
  videoProps: {
    playerType: "cloudinary",
    showJumpControls: true
  }  
});
Code language: JavaScript (javascript)

Now you can also take advantage of the source options available to the Cloudinary Video Player as we will see in the following section.

It’s also simple to configure the videos you include on an individual basis. The videoProps parameter described above represents the video player video configuration options that will apply to all videos played in the Product Gallery. To individually configure each of the videos (sources) you display within the Product Gallery you can include the new videoPlayerSource property which has been added to the mediaAssets parameter. ThevideoPlayerSource property accepts any of the Video Player source options. For example, to configure adaptive streaming options for playing the “dog” video, with hls as the primary format and dash as a fallback option for browsers that don’t support HLS:

const myGallery = cloudinary.galleryWidget({ 
  container: "#my-gallery", 
  cloudName: "demo", 
  mediaAssets: [{ 
    publicId: "dog", 
    mediaType: "video",
    videoPlayerSource: { 
      sourceTypes: ["hls", "dash"], 
      sourceTransformation: { 
        "hls": [{ streaming_profile: "hd_hls" }], 
        "dash": [{ streaming_profile: "hd_dash" }],
      } 
    }
  }],
  videoProps: {
    playerType: "cloudinary"
  }  
});
Code language: JavaScript (javascript)

There are now 2 ways to apply transformations to the videos in the Product Gallery. The new videoPlayerSource property of the mediaAssets parameter is a much more powerful and feature rich alternative to the transformation property of the mediaAssets parameter.

However, you can still use both methods to apply transformations to assets included in the gallery. The Product Gallery widget applies some default transformations to video assets it displays. You can override any of these default transformations by adding the transformation property to the mediaAssets parameter.

For example, to override the default duration of 30 seconds to now be 20 seconds:

mediaAssets: [{ tag: "shirt", transformation: { duration: 20 } }]
Code language: CSS (css)

To add other transformation parameters, besides overriding defaults, you can use the transformation object of the transformation parameter. For example, to add images tagged with “dog” and also add an overlay of the ‘cat’ image in the top right corner:

mediaAssets: [{ tag: "dog", transformation: 
  { transformation: [{ overlay: "cat", gravity: "north_east" }]}}]
Code language: JavaScript (javascript)

Combining both methods, the transformations applied in the videoPlayerSource property will be chained to the transformations defined by the Product Gallery widget. For example, to override the default 30 second duration and also apply an overlay:

const myGallery = cloudinary.galleryWidget({ 
  container: "#my-gallery", 
  cloudName: "demo", 
  mediaAssets: [{ 
    publicId: "dog", 
    mediaType: "video",
    transformation: { duration: 20 }
    videoPlayerSource: { 
       transformation: { overlay: "cat", gravity: "north_east" }, 
    }
  }],
  videoProps: {
    playerType: "cloudinary"
  }  
});
Code language: JavaScript (javascript)

The Product Gallery now supports using the Cloudinary Video Player to play all the videos, adding valuable customization and integration capabilities, analytics and monetization. For more details, see the Product Gallery widget documentation. All widget, image transformation and delivery features discussed here are available with no extra charge for all Cloudinary’s plans, including the free plan.