Created
October 9, 2025 21:05
-
-
Save jramsahai/40646ad59a17a7561cbb3dee358373c1 to your computer and use it in GitHub Desktop.
Demo of Vidyard's progress events, which you can use to trigger client-side events when the viewer hits specific milestones. Use it to pass data into third party systems, or trigger events on the page at certain points in the video.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Vidyard Progress Events Example (Console Logging)</title> | |
| <script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script> | |
| <script type="text/javascript"> | |
| // Instead of sending to a backend, just log progress events to the console | |
| function logProgress(playerUuid, chapter, percentProgress) { | |
| console.log( | |
| `🎬 Progress Event: Player ${playerUuid} | Chapter ${chapter} | ${percentProgress}%` | |
| ); | |
| } | |
| function registerProgressEvents(vidyardEmbed) { | |
| vidyardEmbed.api.addReadyListener(function (data, player) { | |
| console.log("✅ Vidyard player ready:", player.uuid); | |
| // Register progress event tracking | |
| vidyardEmbed.api.progressEvents(function (result) { | |
| logProgress(result.player.uuid, result.chapter, result.event); | |
| }, [1, 25, 50, 75, 95]); | |
| }); | |
| } | |
| // Ensure the Vidyard API is ready before registering | |
| if (window.vidyardEmbed) { | |
| registerProgressEvents(window.vidyardEmbed); | |
| } else { | |
| window.onVidyardAPI = (vidyardEmbed) => registerProgressEvents(vidyardEmbed); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Vidyard Progress Event Logger</h1> | |
| <div id="video-container"> | |
| <img | |
| class="vidyard-player-embed" | |
| src="https://play.vidyard.com/kc9y97BMS1gqP0YSc0yKPQ.jpg" | |
| data-uuid="kc9y97BMS1gqP0YSc0yKPQ" | |
| data-v="4" | |
| data-type="inline" | |
| /> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment