Adding a live timestamp to a video enhances learner awareness and interactivity in eLearning courses. In Articulate Storyline 360, this can be achieved using JavaScript and Storyline variables to dynamically display the current video time as it plays —an approach commonly used in Custom eLearning solutions.
Click Preview to see how to insert a real-time timestamp into a video using JavaScript in Articulate Storyline 360.
This guide walks you through a proven method used by instructional designers and eLearning developers to display video timestamps accurately and efficiently.
Why Use Video Timestamps in eLearning?
Displaying timestamps in videos can significantly improve the learner experience, especially in technical, compliance, or process-based training. Video timestamps help to:
1. Improve learner orientation within long videos
2. Support referencing and discussion during training
3. Enhance accessibility and learner control
4. Add a professional, custom-built feel to courses
This technique is commonly used in advanced Storyline 360 development and LMS-ready eLearning solutions.
Step-by-Step: Insert a Timestamp into a Video in Articulate Storyline 360
Step 1: Open the Project and Select the Video Slide
● Open the course in Articulate Storyline 360
● Navigate to the slide that contains the video
● Confirm the video is already inserted and set to play on the timeline
Step 2: Create Timestamp Variables
Next, create timestamp number variables to track the video playback time.
1. Open the Variables panel
2. Click the + icon
3. Create a variable named VideoMinutes
● Type: Number
● Default value: 0
4. Click the + icon again
5. Create a second variable named VideoSeconds
● Type: Number
● Default value: 0
These variables store the current video playback time.
Step 3: Display the Timestamp on the Slide
Now,
● Insert a Text Box on the slide
● Add both variables to the text box
● Format the text to display minutes and seconds
This displays a visible timestamp in minutes-and-seconds format.
Step 4: Insert the JavaScript Code
Next, add a JavaScript trigger.
● Paste the provided JavaScript code into the editor
Important:
Ensure the variable names in the JavaScript code exactly match the Storyline variables.
● Click OK to save the script
Step 5: Preview the Course
● Preview the slide or the entire project
Confirm the following:
● The timestamp updates in real time
● Minutes and seconds change as the video plays
● The display remains smooth and synchronised with the video
This confirms the JavaScript is working correctly.
Best Practices for Video Timestamps in eLearning
To ensure a polished and learner-friendly experience:
1. Place the timestamp in a non-distracting area of the slide
2. Use a readable font and adequate contrast
3. Test across different screen sizes and LMS environments
4. Avoid overlapping timestamps with captions or controls
5. Use timestamps only when they add learning value
Professional eLearning teams apply this technique selectively for maximum impact.
Summary
By combining Storyline variables with JavaScript, you can insert a live, updating timestamp into any video in Articulate Storyline 360. This approach adds functionality beyond default Storyline features and supports advanced, custom eLearning development.
This technique is especially useful for:
● Corporate training
● Technical instruction
● Compliance modules
● LMS-ready eLearning courses
Frequently Asked Questions (FAQs)
What do I need to add a timestamp in Articulate Storyline 360?
A video, two Storyline number variables, and a small JavaScript snippet are required. No advanced JavaScript knowledge is needed—just copy and paste the provided code and match the variable names.
How does the video timestamp work during playback?
The JavaScript tracks the video’s current playback time and updates the Storyline variables in real time. These variables are displayed on the slide as minutes and seconds while the video plays.
Where will the timestamp work when the course is published?
The timestamp works in HTML5 output and runs smoothly in modern desktop and mobile browsers. Always test the course in the target LMS and browsers before final deployment.
Why should timestamps be used in eLearning videos?
Timestamps help learners track progress, reference specific video sections, and stay oriented during longer or technical videos, improving overall learning clarity.
Can this method be used for more than one video in a course?
Yes. The same method can be applied to multiple videos by creating separate variables and triggers for each video slide or resetting the variables when a new video starts.
