- Get Started
- Programmable Media overview
- Developer onboarding guide
- SDK quick starts
- Try it!
- Video tutorial library
- Programmatic asset management
- Programmatic upload
- Upload programmatically
- Create upload presets
- Auto upload
- Auto-tag assets
- Moderate images with AI
- Upload images in Flutter
- Upload images in Node.js
- Upload multiple files in Node.js
- Upload videos in Node.js
- Upload images in Python
- Upload videos in Python
- Upload assets in a React app
- Upload assets in a Next.js app
- Upload assets with Server Actions
- Upload assets in a SvelteKit app
- Upload assets in a Remix app
- Use webhooks to remove backgrounds
- Interaction with Cloudinary APIs
- Cloudinary SDKs
- Find your credentials
- Configure the JavaScript SDK
- Configure the React SDK
- Configure the Flutter SDK
- Configure Svelte Cloudinary
- Configure the Javascript SDK in Svelte
- Configure the Node.js SDK
- Configure the Python SDK
- Configure the Vue.js SDK
- Configure the Next.js SDK
- List images in Next.js
- Captioning on upload with Node.js
- Delete assets with Node.js
- Manage images in a Django app
- Cloudinary CLI
- Widgets
- Administration
- Programmatic upload
- Optimization and delivery
- Transformations
- Get started with transformations
- Advanced transformation features
- Text overlay transformations
- Complex transformations
- Named transformations
- Named transformations using TX Builder
- Advanced image components
- Trim videos in Node.js
- Splice videos in Node.js
- Zoompan effect
- Video transformations
- Crop and resize images in React
- Crop and resize videos in React
- Remove backgrounds and add drop shadows
- AI generative fill in Next.js
- Color accessibility in JavaScript
- Transformations for social media
- Dev Hints on YouTube
- Programmatic asset management
- Guides
- Upload
- Transform and customize
- Optimize and deliver
- Manage and analyze
- Video APIs
- AI in action
- Native mobile
- Add-ons
- Advanced Facial Attributes Detection
- Amazon Rekognition AI Moderation
- Amazon Rekognition Video Moderation
- Amazon Rekognition Auto Tagging
- Amazon Rekognition Celebrity Detection
- Aspose Document Conversion
- Cloudinary AI Background Removal
- Cloudinary AI Content Analysis
- Cloudinary Duplicate Image Detection
- Google AI Video Moderation
- Google AI Video Transcription
- Google Auto Tagging
- Google Automatic Video Tagging
- Google Translation
- Imagga Auto Tagging
- Imagga Crop and Scale
- Perception Point Malware Detection
- Microsoft Azure Video Indexer
- OCR Text Detection and Extraction
- Pixelz - Remove the Background
- URL2PNG Website Screenshots
- VIESUS™ Automatic Image Enhancement
- WebPurify Image Moderation
- References
- SDKs
- Release Notes
Video Player events and analytics
Last updated: Sep-02-2024
You can register to a variety of video player events and then use these events to create custom video player controls or to trigger other custom behaviors in your application.
Additionally, many of these events can be tracked for Google Analytics or other analytics trackers.
Using video events
The video player supports standard HTML5 video player events as well as several specific Cloudinary video player events.
For example, you can define a set of percentages that will trigger the percentsplayed
event and then perform some operation when the player reaches any of those points. Below, the captured percentages are written to the console log:
Take a look at the Events sample on the Video Player demo page to see some of the events that are triggered as you perform operations on the video player.
Available events
For details on all available events, see Events in the Video Player API Reference.
Tracking video player analytics
You can easily track and view your video player events using the Cloudinary video analytics. Alternatively, you can use the above events to manually capture your data for sending to Google Analytics.
✔️ Feedback sent!
Error
Unfortunately there's been an error sending your feedback.