Forum Discussion

CJLu's avatar
CJLu
Community Member
8 hours ago

Is there a way to prevent the storyline video player from disappearing?

Hey all, 

Is there a way to keep the video player visible after I select it to play?

Once I click play and move the mouse, it disappears briefly.

Thanks! :) 

 

5 Replies

  • I guess you could switch the video player off, then just relay on the Storyline player, which still includes media controls.

    • CJLu's avatar
      CJLu
      Community Member

      Since I have four different videos, that would not be the correct thing to do in this situation. 

  • Nedim's avatar
    Nedim
    Community Member

    Check this post that inolves JavaScript fix.

    https://community.articulate.com/discussions/discuss/how-to-set-video-controls-to-always-show/900083/replies/1215123

    • CarlFink1's avatar
      CarlFink1
      Community Member

      I gather that the flicker involves hiding/showing the controls of the player?

      • Nedim's avatar
        Nedim
        Community Member

        It's the default Storyline functionality when video controls are enabled. The video controls disappear after a short period of mouse inactivity and reappear when you move the mouse again. The script below prevents this from happening, keeping the video controls visible at all times regardless of mouse activity.

        const controls = document.querySelector(".video-animation-container");
        
        controls.classList.remove("controls-hidden");
        
        const observer = new MutationObserver((mutationsList) => {
            for (const mutation of mutationsList) {
                if (
                    mutation.type === "attributes" &&
                    mutation.attributeName === "class"
                ) {
                    if (controls.classList.contains("controls-hidden")) {
                        controls.classList.remove("controls-hidden");
                    }
                }
            }
        });
        
        observer.observe(controls, {
            attributes: true,
            attributeFilter: ["class"]
        });