Add a progress indicator overlay to your videos using the progressbar effect e_progressbar.
This can be used to show the video's progress when a video is played inline and the controls are hidden. You can customize the indicator using the type, color and width parameters.
Read more here
Ruby:
cl_image_tag("dog.gif", :resource_type=>"video", :transformation=>[
{:width=>600, :quality=>"auto", :crop=>"scale"},
{:effect=>"progressbar:type_frame:color_blue"}
])
PHP v1:
cl_image_tag("dog.gif", array("resource_type"=>"video", "transformation"=>array(
array("width"=>600, "quality"=>"auto", "crop"=>"scale"),
array("effect"=>"progressbar:type_frame:color_blue")
)))
PHP v2:
This code example is not currently available.
Python:
CloudinaryVideo("dog.gif").image(transformation=[
{'width': 600, 'quality': "auto", 'crop': "scale"},
{'effect': "progressbar:type_frame:color_blue"}
])
Node.js:
cloudinary.image("dog.gif", {resource_type: "video", transformation: [
{width: 600, quality: "auto", crop: "scale"},
{effect: "progressbar:type_frame:color_blue"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.width(600).quality("auto").crop("scale").chain()
.effect("progressbar:type_frame:color_blue")).resourceType("video").imageTag("dog.gif");
JS:
cloudinary.videoTag('dog.gif', {transformation: [
{width: 600, quality: "auto", crop: "scale"},
{effect: "progressbar:type_frame:color_blue"}
]}).toHtml();
jQuery:
$.cloudinary.image("dog.gif", {resource_type: "video", transformation: [
{width: 600, quality: "auto", crop: "scale"},
{effect: "progressbar:type_frame:color_blue"}
]})
React:
<Video publicId="dog.gif" resourceType="video">
<Transformation width="600" quality="auto" crop="scale" />
<Transformation effect="progressbar:type_frame:color_blue" />
</Video>
Vue.js:
<cld-video publicId="dog.gif" resourceType="video">
<cld-transformation width="600" quality="auto" crop="scale" />
<cld-transformation effect="progressbar:type_frame:color_blue" />
</cld-video>
Angular:
<cl-video public-id="dog.gif" resource-type="video">
<cl-transformation width="600" quality="auto" crop="scale">
</cl-transformation>
<cl-transformation effect="progressbar:type_frame:color_blue">
</cl-transformation>
</cl-video>
.NET:
cloudinary.Api.UrlVideoUp.Transform(new Transformation()
.Width(600).Quality("auto").Crop("scale").Chain()
.Effect("progressbar:type_frame:color_blue")).BuildImageTag("dog.gif")
Android:
MediaManager.get().url().transformation(new Transformation()
.width(600).quality("auto").crop("scale").chain()
.effect("progressbar:type_frame:color_blue")).resourceType("video").generate("dog.gif");
iOS:
cloudinary.createUrl().setResourceType("video").setTransformation(CLDTransformation()
.setWidth(600).setQuality("auto").setCrop("scale").chain()
.setEffect("progressbar:type_frame:color_blue")).generate("dog.gif")
