Video Player on hover toolbars

advanced-prototyping
#1

Hey,
So I’m prototyping some new features for a video player. Not actually using a video, just mocking up the frame and some of the new interactions. Specifically I’ve got an image as the ‘video’ (just a static background) as a user hovers over the image I would like two toolbars to appear - one at the top, one at the bottom - with clickable controls and the correct directional animation on enter and exit (think YouTube’s on hover bars that appear).

To date I’ve been able to get the slide-in/out working when someone hovers over the background image, but then when the cursor is placed over one of the bars it therefore ‘leaves’ the image area and the bars try to hide.

What I’m trying to create:

  • User hovers over image (bars are over the image)
  • Top bar slides down
  • Btm bar slides up
  • Bars stay visible (with clickable buttons in them) until a user moves the cursor completely off the image area

Current results: https://rgthgx.axshare.com/#g=1&p=home&c=1
Any advice?

#2

Hey there! Hope you are doing good.

I think you have used onMouseHover event on the image/video frame.
You can do this in 2 easy ways:

  1. Put all your components inside a dynamic panel with size of the video frame. So all you onMouseHover or onMouseEnter, onMouseOut are now on the dynamic panel.
  2. With your current setup, onMouseOut from the image, just validate a condition to check if the cursor is not over the area of the image.

Let me know if you understood my solution. I will best try to provide help :slight_smile:

Cheers!

#3

Hey,
Thanks for the reply. I’ve tried using conditions, but still not quite working. With conditions it won’t activate the onMouseOut events at all. Doesn’t really seem to matter how I set up the condition. Here’s an image of the conditions I’ve got and the panel setup. Any other ideas? I feel like this should all just work and can’t quite place why it isn’t.

image
image.png264×743 40 KB

#4

Hi,

There seems to be some bug with onMouseOut. Its not working for me too. Or there is some logic behind it.

However, I have a work around and it works like a charm! I have grouped everything.
Check this out
video_frame.rp (48.6 KB)

Let me know if this works out for you.

#5

Without the .rp file this one in a but tricky to solve.

My guess is that your MouseOut never gets triggered before your mouse never gets out as there is a layer between your cursor and video that is your control panel. Try putting the mouseOut on the player control group or dynamic panel according to what you did.

#6

That works! Thanks very much, really appreciate the help. :smiley:

closed #7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.