Video tile animation on Hoverstate?
Jul 27, 2017
Hey everyone. I'm trying to create a hover state for some video-selection buttons that emulates the new Youtube look and feel. Basically I've created a button that's a screenshot of frame 1 of the video the button links to. When the user clicks, it jumps to a new slide that autoplays that video. However, when the user hovers over the button, I want it to play a short preview of the video. Go to the Youtube home page and hover over a video to see the effect I'm going for.
Here's what I've tried so far: Exported a short clip of video in question as an animated gif and pasted that gif in the hover-state window of the button. This is OK, but the gif quality ends up looking really terrible regardless of the export quality.
Next, I tried exporting a very small MP4, pasted it in a new layer directly over the button and set it to autoplay muted, and set up a trigger to show the new layer containing the video when user hovers over. The problem is that whenever the cursor moves even a little, the base layer flickers in until the cursor stops, which kind of destroys the effect.
I tried pasting an MP4 into the hover state, but I need the preview video to loop. I can't figure out a way to loop the MP4 without creating a trigger, and keeping the MP4 in the hover state of this object prevents me from selecting it within the trigger pane.
All of the above strategies have gotten me close to the desired effect, but so far I'm stumped. Any ideas?
8 Replies
Hey Tyler!
Thanks for posting your question here in the forums!
Interesting conundrum. Any chance you can share the .story file here in the community so we can play around and see what effect we can achieve? What if you put the mp4 onto a layer instead of a state? It really helps to see the file.
I had a quick look at your question and did a rough example. But then I noticed this doesn't work in HTML5, at least not in SL2.
Thanks Nicole. The video clips currently in the example are all proprietary info, so I'll need to put in some placeholders before sharing.
Michael, what was your strategy here? This looks really similar to my example where I pasted an MP4 into the hover state, because the preview clip doesn't loop once it reaches the end. Also, what aspect of your test doesn't work within html5?
I seem to recall (though I can't find it now) that the trouble with GIFs is that SL compresses them again, which leads to poor performance.
IIRC the solution was to replace the GIF file after publish with the uncompressed version and that should resolve the issue. Not ideal, but workable I think.
I'll give that a shot with my original approach. Thanks for the suggestion, Sean!
Is this what you are trying to do? Video Hover example
I pasted the video on the hover state and, in this case, on the selected state as well because I wanted it to keep playing.
I created this in SL2 and am not sure if it works in HTML5.
This is close. The select state wouldn't be necessary because selecting a video takes them to a new slide where the video autoplays.
I think the solution will be just adding a silent autoplay of the entire clip to the hoverstate rather than a looping, small clip. I had this vision of exporting an additional MP4 of a highlight of the video that loops, but this doesn't seem possible. A longer clip avoids this issue. Thanks for the help and suggestions, everyone!
You might not need the entire video depending on how long it is, but I think you are correct that looping will not work within a hover.
This discussion is closed. You can start a new discussion or contact Articulate Support.