Inline frame moving, BUT with the SAME video being played

Sorry guys!! Again us, could someone please tell us if this can be done in Axure?

If you take a look carefully at this link of “TED Talks videos”, (we want to have the same video playing), meaning if you scroll Down, the big screen video disappear and a smaller one appear, else the other way around, the small disappear and the big reappear.

Can we do the same in Axure while using the same inline frame video while being played?

In other words if the video is playing, it will continue and not start another one, is it possible in Axure?

So far, we know;

  1. It’s doable if you are not using the same video being played, although we do not want to have another one started…

  2. It’s doable by moving and resize window, although its get quite complicated the interaction of it since we do not want to place the video exactly like in TED, instead we want to have it at different places…

So again, can do this by using the same video be played and display it at different places? Doable in Axure?

https://www.ted.com/talks/christoph_niemann_you_are_fluent_in_this_language_and_don_t_even_know
_it

Thank you in advance!
Luc.

See my reply to your original thread.
I used hotspots to define the size and position of the video when it is big and small, so you should be able to just move the hotspots around in the Axure Editor and the code will still work.
https://forum.axure.com/t/inline-frame-video/54343/8?u=mbc66

Hi @splix,

You could achieve it, the Ted feature, with Adaptative view,
But I don’t think you will have a smooth transition

Here a draft to understand the approach:
inline_video_V3.rp (58.3 KB)

Best,

Hi Mbc66 -

Thanks, its another solution, the only problem with this close solution :wink: is if we move the small Video which is our goal as we do not want it to be there, it get stuck with the Pin to browser issue. Where ever I put it, it’s affected by the pin to browser location. I understand we can move the big one though, but what about a specific location for the small video? would that be possible with your approach? I’ve tried, but so far no success…

Thanks!!

Hi PierreJ -

Same here, the Pin to browser approach is affecting where we want to locate the smaller video. We do not want it to be exactly there, for instance at the bottom right… Understand what I mean? Where ever we move it, just doesn’t work, I’ve try, although maybe there is something wrong that I’m doing on my side?

Thanks!!

@splix,

Sorry, I thought you were trying to achieve the same effect as the TED site that you pointed to as an example. The whole point was to get the small video pinned to a specific location: in the header. If you do not want the small video pinned to a specific “floating” location, then don’t put the video in the pinned dynamic panel.

You’ll need to post your .rp file or more detailed explanation or demonstration of what you’re trying to do. Sketches with states would help folks understand just what you’re trying to do here.

I hear you mbc66, sorry. Please find the attached file. I’ve added a page under yours, name Challenge with explanation in it. Hope it is clear… :slight_smile:

Inline_Frame_Challenge.rp (91.5 KB)

Again, I don’t think it’s at all possible to have multiple iFrames with synchronized video --but I’d love to see someone prove me wrong. It would be the equivalent of having two separate browser windows open, doing something in one and have it mirrored in the other. My first solution mimicked the TED site, using a single iFrame and just resizing and moving it.

I’m not entirely sure why you want or think you need to use two instances of an iFrame or video to achieve your objectives here. You should be able to use the same method I have above to pin your small video anywhere you need, move it around, etc.

I did play around with using javascript to synchronize playback of two videos with limited success. I found a solution here: https://bocoup.com/blog/html5-video-synchronizing-playback-of-two-videos but could not get those methods to work in Axure. Perhaps someone (like @nkrisc) with more js skills could pull it off.

I did come close though and managed to get the same video with synchronized playback using controls in Axure (hiding the built-in HTML5 video controls.) It allows for playing and pausing the video on clicking it. It does require direct access to a video stream (which appears to be blocked on the TED site–those videos only available via their embedded players in an iFrame.)

Here is an example using your Challenge page layout and logic.
Inline_Frame_Challenge.rp (154.8 KB)

1 Like

Thank you very for your effort mbc66, very appreciated! Quite cool!!

I would also love to have someone proven us wrong and that it is possible in Axure… Should we repost this challenge as imagine by replaying between each other, this post get old?