Products
Products
Video Hosting
Upload and manage your videos in a centralized video library.
Image Hosting
Upload and manage all your images in a centralized library.
Galleries
Choose from 100+templates to showcase your media in style.
Video Messaging
Record, and send personalized video messages.
CincoTube
Create your own community video hub your team, students or fans.
Pages
Create dedicated webpages to share your videos and images.
Live
Create dedicated webpages to share your videos and images.
For Developers
Video API
Build a unique video experience.
DeepUploader
Collect and store user content from anywhere with our file uploader.
Solutions
Solutions
Enterprise
Supercharge your business with secure, internal communication.
Townhall
Webinars
Team Collaboration
Learning & Development
Creative Professionals
Get creative with a built in-suite of editing and marketing tools.
eCommerce
Boost sales with interactive video and easy-embedding.
Townhall
Webinars
Team Collaboration
Learning & Development
eLearning & Training
Host and share course materials in a centralized portal.
Sales & Marketing
Attract, engage and convert with interactive tools and analytics.
"Cincopa helped my Enterprise organization collaborate better through video."
Book a Demo
Resources
Resources
Blog
Learn about the latest industry trends, tips & tricks.
Help Centre
Get access to help articles FAQs, and all things Cincopa.
Partners
Check out our valued list of partners.
Product Updates
Stay up-to-date with our latest greatest features.
Ebooks, Guides & More
Customer Stories
Hear how we've helped businesses succeed.
Boost Campaign Performance Through Video
Discover how to boost your next campaign by using video.
Download Now
Pricing
Watch a Demo
Demo
Login
Start Free Trial
In video playback, a 'drop-off' occurs when a viewer abandons a video before completing it. Understanding viewer drop-offs is crucial for content creators, marketers, and developers, as it provides insights into viewer behavior, content engagement, and areas where the user experience can be improved. Using JavaScript player events, such as play, pause, seek, and ended, it is possible to track viewer drop-offs effectively. This allows developers to analyze when and why viewers leave a video and take proactive measures to improve retention. Key Events to Track Viewer Drop-Off To track viewer drop-offs, certain events within the video player are critical for capturing user interactions. These events help pinpoint when a viewer starts watching, pauses, seeks to another part of the video, or finishes watching. Play Event The play event is fired when the video begins to play, and it is essential to monitor how long the video plays once it starts. If viewers often drop off soon after starting a video, it may indicate an issue with the video content or user interface. Example : const video = document.getElementById('videoPlayer'); video.addEventListener('play', () => { console.log('Video started playing'); // Send event data to tracking service }); Explanation: Retrieves the video element using getElementById('videoPlayer') . Listens for the play event, which triggers when the video starts playing. Logs a confirmation message to the console and serves as a hook for tracking playback events. Pause Event The pause event occurs when the video playback is paused. Tracking this event is important as it can indicate viewer engagement levels. If a viewer frequently pauses the video early, it could suggest a loss of interest or distractions. Example: video.addEventListener('pause', () => { console.log('Video paused'); // Send pause time data to tracking service }); Explanation: Attaches a pause event listener to the video element. Executes a callback function when the video is paused by the user or programmatically. Logs a message to the console confirming the pause event. Seek Event Seek events are triggered when viewers skip to different parts of the video. Analyzing seek events is essential for understanding viewer behavior, such as whether they skip content they find uninteresting or if they rewatch specific parts. Example : video.addEventListener('seeked', () => { console.log('Viewer skipped to a new part'); // Send seek position data to tracking service }); Explanation: Registers a seeked event listener on the video element. Triggers the callback when the viewer jumps to a different part of the video. Logs a confirmation message that a seek action occurred. Ended Event The ended event is fired when the video finishes playing. This event is crucial in tracking whether a viewer completes the entire video or if they abandon it before the end. Example : video.addEventListener('ended', () => { console.log('Video finished playing'); // Send completed video data to tracking service }); Explanation: Adds an ended event listener to the video element. Executes the callback when the video finishes playing completely. Logs a message confirming the video has ended. Tracking Drop-Off Using Playback Progress To enhance the tracking of drop-offs, it's crucial to monitor playback progress. This allows for detailed insight into when viewers abandon the video. By recording time-based data, developers can determine the specific point at which viewers stop watching. Time Update Event The timeupdate event provides real-time data about the current playback position. By listening for this event, developers can monitor how much of the video the viewer has watched and at what time they leave the video. Example: video.addEventListener('timeupdate', () => { const currentTime = video.currentTime; const duration = video.duration; // Track drop-off point (e.g., when viewer watches 50% of the video) if (currentTime / duration > 0.5) { console.log('Viewer has watched 50% of the video'); } }); Explanation: Adds a timeupdate event listener to monitor video playback progress in real-time. Continuously checks the current playback time relative to the total duration. Triggers an action when the viewer has watched more than 50% of the video. Integrating Drop-Off Data into Analytics Once you have captured the relevant video events (play, pause, seek, and end), the next step is to integrate the data into an analytics system. This system should store key information such as the time of pause, seek, and the point at which the viewer leaves the video. It should capture engagement metrics such as total play time and seek frequency. Example : Sending Drop-Off Data to Google Analytics video.addEventListener('pause', () => { const pausedTime = video.currentTime; ga('send', 'event', 'Video', 'Pause', 'Video Name', pausedTime); }); video.addEventListener('seeked', () => { const seekPosition = video.currentTime; ga('send', 'event', 'Video', 'Seek', 'Video Name', seekPosition); }); video.addEventListener('ended', () => { ga('send', 'event', 'Video', 'Complete', 'Video Name'); }); Explanation: Tracks pause events : Sends a Pause event to Google Analytics (GA) along with the timestamp where the viewer stopped. Captures seek actions : Sends a Seek event to GA, indicating where the viewer jumped to in the video. Logs video completions : Sends a Complete event to GA when the video finishes playing. Best Practices for Drop-Off Tracking Track Engagement Points : It's crucial to track specific points of engagement, such as 25%, 50%, and 75% video completion. This helps identify critical drop-off points. Use Custom Event Tracking : Customize event tracking to capture unique data such as specific video sections viewers skip or rewatch. Handle Edge Cases : Ensure that drop-off tracking is not triggered during video errors or unexpected pauses due to network issues. Store Drop-Off Data : Implement robust storage mechanisms (e.g., databases or cloud storage) to store tracking data, allowing for long-term analysis of trends and improvements. Optimize Video Content Based on Insights : Use drop-off insights to optimize video content. For instance, if viewers consistently drop off at a particular segment, you can refine or replace that section for better engagement.