Forum Discussion
xAPI for user pausing and playing video
I'm trying to capture if and when a user clicks the pause/play button in the Storyline player while watching a video using xAPI. It seems like it should be simple, but I'm struggling to find a way to do it. I want to know if there are common times within a video our users are stopping, as that may indicate that we need to cover that concept in more depth or more slowly.
I can't use "user clicks" as a trigger because the pause/play button is not available as a selection (this would work if the user clicks on the video object directly, but I'm guessing most people use the pause/play button in the Storyline player.) I tried using timeline events, but that only has "timeline starts" and "timeline ends", so that wouldn't capture any pausing events between the start and end of the video.
Has anyone else tried capturing this data using xAPI?
I run this JavaScript code when the timeline starts:
let video = document.getElementsByTagName('video')[0]; video.ontimeupdate = () => setVar('isVideoPlaying', !video.paused && !video.ended);
The script listens for the "ontimeupdate" event, which is triggered regularly as the video plays. Each time the event fires, it checks whether the video is currently playing, paused, or ended, and updates the variable "isVideoPlaying" accordingly.
I could have targeted the video play/pause button as well, but that wouldn't work if the video controls are hidden. This script however, will work regardless of whether the controls are visible or not. I have attached the .story file used in this example for your reference.
- NedimCommunity Member
I would likely use JavaScript to target a video and continuously monitor whether it is playing or paused, updating a Storyline True/False variable accordingly. This approach enables Storyline to accurately track the current status of the video. Subsequently, I would create a custom xAPI statement based on changes to this True/False variable. If the video is playing (True), I would execute the following statement...
...else, run
In SCORM Cloud, your report would look similar to
Attached is a short video demonstrating this interaction in SCORM Cloud.
- JennySaucerman-Community Member
Thanks so much for your response! How are you capturing the user clicking the play/pause button? What is toggling the value for the isVideoPlaying variable? That's where I'm stuck. The xAPI you have here makes sense to me, but I don't know what's feeding into the isVideoPlaying variable.
- NedimCommunity Member
I run this JavaScript code when the timeline starts:
let video = document.getElementsByTagName('video')[0]; video.ontimeupdate = () => setVar('isVideoPlaying', !video.paused && !video.ended);
The script listens for the "ontimeupdate" event, which is triggered regularly as the video plays. Each time the event fires, it checks whether the video is currently playing, paused, or ended, and updates the variable "isVideoPlaying" accordingly.
I could have targeted the video play/pause button as well, but that wouldn't work if the video controls are hidden. This script however, will work regardless of whether the controls are visible or not. I have attached the .story file used in this example for your reference.