I use inline frame with video. How to connect button Play in video to make another action.


#1

I use inline frame with video. How to connect button Play in video to make another action.

For exaple i want to do something like that.
When I click button play in video show some box (shape or something) below wideo
The wideo it’s working but i don’t know how to fire interaction when i click Play in video?

Thanks in advance for any help on this.


#2

Since Axure doesn’t have a video player widget, there’s no supported means to get the properties or status of a video object. There are several methods to do this with javascript or JQuery, such as setting up an event handler for the video object and a function like isPlaying(). Just be aware that javascript injection is not officially supported. I got this to work years ago in RP8 but can’t find the forum threads anymore --they must have been scrubbed.

With the Inline Frame method, you are essentially loading a video object (or page with embedded video object) in a separate page which makes things even harder. You’d need to detect the play/pause status, set a global variable, then on the parent page have a continuously looping dynamic panel that tests the value of the global variable.

If you only need to demonstrate the concept, or maybe only need to show your extra stuff once–the first time the user clicks the Play button–then there might be a trick you could try. It would require the ability to autoplay the video, which current versions of some browsers and mobile OS’s do not allow. The last I tried Firefox and Edge on Windows, videos could autoplay, but not Google Chrome, which blocks autoplay until the user interacts with the video or page content. Here’s the approach though… Load the video in the Inline Frame with “autoplay=false” and place a hotspot right in front of the iframe, the same size as the iframe. Add an OnClick for the hotspot to hide itself, load the same video in the iframe with “autoplay=true” and show your other widgets. Or, take a screenshot of the first frame and use that as the initial “fake video” --when user clicks it to play it, hide it and show/load video in the iframe.

To get around autoplay blocking in the past, I’ve converted the first few seconds of a video to animated GIF (SnagIt by TechSmith is great for this) --whatever minimum time to get across to test participant or developer that this is representative of a real video. You can just drag in a GIF to the page or load it in an Image widget and if animated it will play in the browser.