How to Save and Restore Video Progress

By default, user progress is saved in the browser's local storage. This allows the user to continue watching the video from where they left off. To provide a seamless experience (similar to Netflix), you can store this progress and restore it in the next session, even across different devices.

To achieve this, simply send the user's progress (represented by stats.hm_range) to be saved on your server, and then restore it using gallery.set_video_play_stats() in the video.load callback.

For more information, refer to the Cincopa Events Documentation.

Video Progress Configuration Options

Key Values to Configure

1. cincopa.analytics_persistent:
   • Purpose: Controls the persistence mode of analytics. To enable video progress tracking, this must be set to either localstorage or cookie.
   • Possible values:
     • off – No analytics tracking.
     • localstorage – Store analytics in the browser's local storage.
     • cookie – Store analytics in a cookie.
   • Example:
     cincopa.analytics_persistent = cincopa.analytics_persistent || { mode: "localstorage" };

Stats object explanation

1. stats.hm_range:

   • Purpose: A comma-separated list of time ranges indicating the watched video segments.
   • Example: "10-20,30-40" means the user watched from seconds 10-20 and 30-40.
   • For multiple views of the same segment, use a colon. Example: "10-20:2" means the user watched seconds 10-20 twice.

2. stats.current_completion_percent:

   • Purpose: The current percentage of the video completed by the user. ```

3. stats.completion_percent:

   • Purpose: The actual percentage of the video the user has watched.

4. stats.duration_sec:

   • Purpose: The total duration of the video in seconds.

5. stats.current_progress_sec:

   • Purpose: The current playback time of the video in seconds.

6. stats.completion_sec:

   • Purpose: The total time the user has watched the video across all sessions in seconds.

How to Enable Video Progress Tracking

To save and restore the user's progress, you need to use the gallery.get_video_play_stats() and gallery.set_video_play_stats() methods. These will allow you to track the user’s watch progress and sync it across sessions.

Example:

<script type="text/javascript">
var cincopa = cincopa || {};
cincopa.analytics_persistent = cincopa.analytics_persistent || { mode: "localstorage" };
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
    // Get video progress stats
    var stats = gallery.get_video_play_stats(data);
    
    // Display current progress data
    console.log("Current Completion Percent: " + stats.current_completion_percent + "%");
    console.log("Completion Percent: " + stats.completion_percent + "%");
    console.log("Watched Range (hm_range): " + stats.hm_range);
    console.log("Total Duration (duration_sec): " + stats.duration_sec + " sec");
    console.log("Current Progress (current_progress_sec): " + stats.current_progress_sec + " sec");
    console.log("Total Watched Time (completion_sec): " + stats.completion_sec + " sec");

    // Optionally, save user progress stats to your server
    // Example: Save to server using stats.hm_range
    
	}, filter: "video.timeupdate"
});
cincopa.registeredFunctions.push({
	func: function (name, data, gallery) {
    // Load user progress from the server and resume playback
    gallery.set_video_play_stats(data, "0-7,8-13:2,14-16");
	}, filter: "video.load"
});
</script>