Forum Discussion

JoeSchelb's avatar
JoeSchelb
Community Member
4 months ago

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.

  • 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

  • Nedim's avatar
    Nedim
    Community 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.

  • 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.

    • JoeSchelb's avatar
      JoeSchelb
      Community Member

      I will create a new story with substitute videos for you to test. 

  • JoeSchelb's avatar
    JoeSchelb
    Community 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.

  • Nedim's avatar
    Nedim
    Community 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.

  • Nedim's avatar
    Nedim
    Community 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:



        

  • 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

     

  • 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.