Forum Discussion
Can you pause a video in a marker with trigger?
Good Day,
I am looking for some help. I was wondering if anyone has found a way to stop a video in a marker using Triggers? I am trying to put videos in two markers on my page. I have triggers Pausing the Timeline when the marker opens and Resuming the Timeline when the marker closes. When the timeline resumes, you can hear the video play again inside the marker. Is there a way to stop the video from playing in the background?
Thanks for the help.
- Nathan_HilliardCommunity Member
You can do this to control the video inside the marker.
This sample finds the video in the marker, and then starts or stops it according to a keypress (linked to a variable change). You can trigger the JavaScript however you want, and it will control the video. It does not have to be visible to start or stop it.
Sample clip from https://www.pexels.com/video/wind-chime-hanging-on-a-tree-2122934/
Example: https://360.articulate.com/review/content/726237cc-767f-466a-95f3-5340053c056c/review
- NedimCommunity Member
I understand you have two markers, each holding a video. Nathanial has set up a perfect example of how it's done with JavaScript, and I don't think there is any other way to execute what you asked for. Alternatively, since you have two videos, you can Execute JavaScript when the timeline starts on this slide:
let videos = document.querySelectorAll('[data-video-id*="video"]');
window.video0 = videos[0];
window.video1 = videos[1];
window.video0.onplaying = function() {
setVar('videoPlayed', '0')
}
window.video1.onplaying = function() {
setVar('videoPlayed', '1')
}
Then Execute JavaScript when the user presses something (ex. space)
if (getVar('videoPlayed') === 0) {
if (!video0.paused) {
video0.pause();
video1.pause();
} else {
video0.play();
}
}
if (getVar('videoPlayed') === 1) {
if (!video1.paused) {
video1.pause();
video0.pause();
} else {
video1.play();
}
}
Assuming you have a number variable named 'videoPlayed' created in Storyline. This way, each video can be paused and played without interfering with each other. Please refer to the attached Storyline file for reference. - CaryGlenn1Super Hero
Hi Joe,
It's usually easier to help troubleshoot issues if you include an example of the slide. Take out anything proprietary or identifying and put in some lorem ipsum text if needed.
One way you might be able to do it is to put the marker on a layer. You could then have a trigger to hide the layer when the user clicks the marker. That should stop the video from playing. I haven't done a lot of testing on it yet but it is just a thought.
- JoeSchelbCommunity Member
I will create a new story with substitute videos for you to test.
- JoeSchelbCommunity Member
I have finally been able to upload an example file. I am not able to use my actual file, but I took what Nathanial uploaded and then added the triggers that I was using. I added two triggers to Marker 1. The first trigger was to pause the timeline when content opens, and my last one was to resume the timeline when content closes on Marker 1. I tested the file, and when I paused the Timeline and closed the marker, the page resumed. The audio on the base layer started playing, and you could hear the audio from the video. I need the video to stay paused when the Marker 1 closes.
- Nathan_HilliardCommunity Member
Add triggers to start or stop the video AFTER you toggle the timeline. Since the video is set to Play Automatically, it is tied to the timeline. See the setting below.
- NedimCommunity Member
I misunderstood your post and issue, and created a more complex solution with JavaScript. If you have audio running in the background and only one video placed in the marker, you can pause the video when the timeline resumes using three triggers: the two triggers you already have and one more to execute the JavaScript.
- JoeSchelbCommunity Member
I just realized I screwed up when looking at my file. I meant to have two markers on the page. I am attaching what it should have been. Sorry about this.
- JoeSchelbCommunity Member
I would like to say thank everyone for their help.
- NedimCommunity Member
Since you have the same video used in the second marker as well, you could create same Execute JavaScript trigger when content closes on Marker 2. If different video is inserted to Marker 2 then I suggest similar approach.
1. Create Execute JavaScript trigger When the timeline starts on this slide:
let videos = document.querySelectorAll('[data-video-id*="video"]');
window.video0 = videos[0];
window.video1 = videos[1];
2. Update existing Execute JavaSript triggers When content closes on Marker 1 and Marker 2:
video0.pause();
video1.pause();
Example:
- Nathan_HilliardCommunity Member
Use the same idea as my last post. To accommodate two (or more) markers on a single slide, I modified the JavaScript slightly. The script is still triggered by changing the 'action' variable. Now, the target marker is specified by the 100s unit of action's value (so, 101 = play Marker 1 video, 200 = pause Marker 2 video, etc.). Note that each marker should be labeled with the appropriate accessibility tag (e.g., Marker1, Marker2, etc.) so that it can be identified by the script.
The only hitch is when you directly click from one marker to the other (rather than closing one and then opening another). I added a couple of variables to indicate if each marker is currently open or closed. These let you selectively pause the video on all other markers when the timeline resumes, unless one happens to be already open. Make sure you pay attention to the order of the triggers.
In practice, I'm sure you can clean this up a bit. See the modified example you posted.
Note, this file seems somewhat corrupted since it won't allow me to copy and paste triggers. If you move forward, I would suggest creating a new file and rebuilding the content rather than trying to expand on this file.
https://360.articulate.com/review/content/cf989336-94df-41c6-a6e8-3f424badada9/review
- Nathan_HilliardCommunity Member
On more update: The triggers to resume the timeline also need to check if any of the markers are open before resuming. Otherwise, the timeline audio resumes even if the the next marker is opened by clicking directly. See new attachment.
Updated link: https://360.articulate.com/review/content/0b3d5106-5bd8-4832-9be4-8ba5ea855c2f/review
Last issue you will need to consider (at least for the way this demo is assembled) is that if you switch between browser tabs, everything pauses on the slide. When you come back, the playing of the timeline and marker videos may be disrupted. You would either need to better control how the videos are triggered in your final product, or perhaps use an eventListener to monitor for when the tab loses and/or regains focus, and play or pause the marker videos as appropriate based on the 'markerOpen_#' variables.
Perhaps see https://stackoverflow.com/questions/10338704/javascript-to-detect-if-user-changes-tab for ideas.