Forum Discussion

SamBarnard-98a4's avatar
SamBarnard-98a4
Community Member
2 years ago

Rise Video Player Controls - Auto hide when paused

Hi Articulate,

I've not seen this happening on any video content I view in Rise360 and wondered if this could be done (or added as a feature request if not).

When pausing a video, it would be nice if the player controls would vanish after a time (e.g. 1 second) if no mouse movement on the video is detected.

This would be really useful for tutorial videos that make use of captions so they weren't hidden under the video controls when paused, thus making them near impossible to read. Would also improve clarity of the paused video so the learner could better see the frame without the video controls being in the way to better grasp the context.

Many thanks,

Sam

  • PhilFoss's avatar
    PhilFoss
    Community Member

    Sam that's a great idea. I've added this as a theme component that can be added to an exported course. Here it is in action, the transparency of the controls lower to 20% (or whatever you want) on pause so you can more easily see what is underneath the controls.

     

     

  • Hi there, Sam! While the player controls stay visible on the video when paused, I can see how making them disappear would be helpful. As you said, that would allow learners to view the full video frame and captions without the player in the way.

    For now, the best way to view the video without player controls is to video the video with the picture-in-picture feature. Here's a short video of that feature in action

    You could even add a caption below the video that says something like, "Play the video picture-in-picture to view it without player controls." 

    • SamBarnard-98a4's avatar
      SamBarnard-98a4
      Community Member

      Hi Alyssa,

      Thanks for taking the time to respond. I'll pitch this to my team and see if it's something worth pointing out to our learners.

      On the face of it this feels a little clumsy and less professional, especially considering that the video player controls auto-hide during playback anyway - again, why not extend this feature for when the video is paused, controls becoming visible when mouse movement over the video is detected as in playback.

      Kind regards,

      Sam

  • Hi Phil,

    That doesn't look too bad and might actually work in the mean time. 

    I suppose my big question is how did you pull it off and is this only for exporting a course from Rise to a SCORM?

    Kind regards,

    Sam

  • Hi Phil,

    Thank you for the response. I've had a go and managed to get it to work.

    I did try editing the index file without extracting the SCORM package, but that seemed to crash Windows Explorer. So I went down the route of extract the SCORM, replace the index file, and zip it back up. This got the script you wrote working as intended, and assuming this zipped folder will still function as a SCORM then brilliant!

    Just a shame this only works as a SCORM, but again this is really cool. Many thanks for taking your time to put this together.

    Sam

    • PhilFoss's avatar
      PhilFoss
      Community Member

      Glad that worked Sam, when Rise supports these basic UI improvements natively you can simply stop including the theme component in your exported package.

      • SamBarnard-98a4's avatar
        SamBarnard-98a4
        Community Member

        Hi Phil,

        I don't suppose the same control could be applied to the big "Play" button that sits in the center of the video frame that also shows up when paused? (It's also there when you first encounter the video before you've started playback).

        Kind regards,

        Sam

  • Hi Phil,

    I'll keep my eyes peeled on your site when you do!

     

    Kind regards,

    Sam

  • Just adding this here if someone stumbles upon this thread:

    For whatever reason, my Rise stopped exporting an index.html file in the SCORM with a <style> tag in it. For that reason I'm doing this:

    1. Open the index file as normal in an editor like DreamWeaver.
    2. On the line above </body> add <style>, paste in the code mentioned in earlier posts, then add </style> to the line after it. You should now have:

    <style>

    {copied code}

    </style>

    </body>

    •