Hello!
I have put a vimeo video into a rectangle element. It autoplays (from the vimeo embed options). But, when I load any scene in the Hype document, the video (audio) automatically starts. And when I exit the scene it continues. I’m not sure what kind of html or javascript I need to include so that the vimeo video ONLY plays when the scene is loaded and so that it stops playing when the scene is unloading.
Help please!
Hi @caverbook
You would have to manually stop/pause the video on scene unload. Depends on how you’re loading or using the Vimeo video as to what a solution may entail.
Can you share a doc?
There are posts here regarding using Vimeo with Hype. One such technique would require using the postMessage() method to send messages to the player.
Hi there!
Here’s a zip to the complete Hype document I’m working in. https://drive.google.com/open?id=0B3WCGwlQolISQXhHbDFQcEplNlU
Hi @caverbook
Sorry for the delay … you left a lot of assets in there which made it quite big to download 
Here is a cut down version. I have left a couple of scenes in there and 2 videos. I have deleted all assets so it would be small enough. The important scenes are the 2 videos. As you can see I have written 3 functions. The “init” to set up the scene and get the video and add listeners for the events. The “vimeo_pause” is just a function with a call to the post() method setup in it with the message “pause” … in other words when you pause the video you trigger the onPause() method. Also when the video naturally ends you trigger the onFinished() method. These are basically callbacks so you can trigger something on those events.
For all this to work you have to call the function “init” on scene load and the “vimeo_pause” on scene unload. Also, you must change the property in the iFrame to autoplay=0. Turning off the autoplay. We handle the autoplay by calling the post(‘play’); when the video is ready.
Edit: Oh, and give the iFrame a class of “video”.
Hope that makes sense! 
ch5_20170416-vDBear.zip (915.0 KB)
@DBear - As always - Thank You for the lesson!
@caverbook I noticed that “Group 2” was covering the Vimeo (“Rectangle”) Play~Pause button. Perhaps this is a happenstance result of DBear’s trying to reduce things down to a manageable level for a Forum download.
Thanks @JimScott
Not “Happenstance” … this was as is when downloaded. Of course, it would be a problem if you had to touch the play button to play the video but playing and pausing can be acheived by touching (clicking) any part of the video (as per normal Vimeo/Youtube videos) so I didn’t really address this. However, and I left this in the example. You can bind a Hype element (button) to play/pause the video using the same post() method.
And, by the way, I believe this is @jonathan’s code posted somewhere here just adapted for use with this particular doc. 
I do use other technique’s to interact with Vimeo video’s but this seemed a good approach based on the way the video is added to the doc.
@caverbook
Hi Carey!
I removed the “super grouping” arrangement that comprised “Group 2” (the group spread across entire viewport) and reduced it down to the same configuration as “Group 1” (i.e. the “left”~“previous” arrow button) so this “right”~“next” arrow group now just covers the arrow button and no more.
With this adjustment everything appears to work as intended - the scenes transition just as before, but the Vimeo button is no longer blocked when clicked on. To have a button appear in response to a user action and then not be functional - even if clicking elsewhere accomplishes the desired action - is not good interface design.
Unless You have a specific reason for having “Group 2’s” original dimensional configuration I would suggest switching it to match that of “Group 1” - i.e. covering just the button - as in the image below (and in contrast with “Group 2’s” original dimensions as shown in the attachment of my post above).
Great for doing that for the OP but that was not the problem 
The problem was auto-playing from the beginning and not stopping when changing scenes 
of course this will probably help from a UI perspective but the videos are meant to auto-play and stop within each scene. Unfortunately, when embedding Vimeo vids you either have the play bar or the button in the middle. So, i'm guessing the OP doesn't want either but cannot achieve this 
Hi Jim - thanks so much for showing me this! It is definitely an improvement. And thank you @DBear for the code about vimeo videos. I'm about to work on it all and it looks really clear. I'll post here if I have any questions or issues, though. Thank you so much!
I'm open to better user interface design. I'm also trying to figure out proper responsiveness of the title (1st) scene elements and the subtitles with the audio - so that it is large enough and looks good on desktops' browsers and mobile devices. As well as a few other things like making all text be the same font size and be responsive. right now the text size changes. I'll make another thread for this when I'm ready, but if you or @DBear have any immediate suggestions, that would be great! Thanks so much.
You can see how it currently functions on mobile devices www.onlythebridge.com chapters 2 through 5.
