Hi there, I wonder if someone might be kind enough to shed some light on this and maybe steer me in the right direction?
Basically, I’d like a series of small video ‘vignettes’ to be triggered to play (or rewind and pause) as a timeline is progressed through. I’ve attached a zip of ‘interactiveVideo_test’ (which just contains perfunctory sample vids) to hopefully show the kind of thing I’m trying to achieve.
THE PROBLEM
The example I’ve created works fine in desktop browsers (including when the window is resized) but on mobile devices only the first video plays.
I’m guessing I’ve probably made a mess of the js or the id’s or something? Or maybe I’m on the wrong track altogether?
Anyway, if some kind soul could take a look and chuck some advice my way you’d make a very frazzled woman very happy
Even though you have unique ids, you have several layouts which effectively are different documents so even though you have elements with ids there are more than one per layout so it may have difficulty finding them. But I notice that we’re using a persistent symbol which shouldn’t matter. I’ll have a better look on my laptop in a bit.
Many thanks @DBear … I’m still on the case at this end, too, but not getting anywhere thus far. Anything you happen to spot as anomalous will be greatly appreciated
Hi, not sure if it matters because i didn’t test against mobile, but all your sources have the same id … remove them
if this does not help try to set classes instead ids and access them by querySelector of sceneelement. there may be a case on how hype handles custom innerHTML of symbols … really just a guess here
I thought I’d named them all uniquely. In the inner html of the individual ‘frames’ (Symbol > Group > Main > Frames … I think I’ve stated that path correctly, I’m not at my desk right now; so I’m afraid that’s just from memory) I’ve variously assigned id’s of id=“video01” or id=“video02” etc. etc. but maybe that’s not where I need to assigning them? I’m not very au fait with this side of things; so am feeling my way.
Anyway, all feedback and advice is most welcome … so I’ll have another look
Okey dokey… well your suggestion, @jonathan, has nailed it spectacularly successfully
A MILLION THANKS!!!
And thank you, too, @DBear and @h_classen for having a look. I’m very grateful for the time you all took, it’s much appreciated
Attached is the revised, working version. There is unquestionably a more elegant way of writing the js that I cobbled together, but the attached example may serve as a good basis for anyone aiming to do something similar.
I haven’t seen to many (any?) documents that have two persistent symbols to accommodate a range of different layouts. It is a good technique!
A couple thoughts: Strictly speaking in the case of where you’re at right now I’m not sure more than two layouts (as represented by the two persistent symbols) are necessary, as the zoom contents you use would handle arbitrary sizes just the same as your other layouts right now. If you add content outside the persistent symbol in the future multiple layouts could be useful though. Also note that you could use the new Hype API (hypeDocument.currentLayoutName()) to see which layout you’re on so you aren’t attempting to play both videos.
Sorry to be a pest but I was wondering if you could throw some extra advice my way?
After a bit of experimentation I’ve ascertained that I can get away with three layouts (two was just too few, unfortunately) which are named ‘Desktop’ ‘iPhone’ and ‘Custom’. That’s the good news However, I’m not having any luck implementing the new API you’ve mentioned (hypeDocument.currentLayoutName()).
As it stands I’m using the following js to (for example) play video01
It works, but as you rightly point out the project is unnecessarily trying to play three instances of the video.
I’ve tried using the new API but am not having any luck; so I’m probably not referencing it properly. If you could steer me towards some examples that I could learn from and/or offer any other pointers that would be fab, cheers. Hope you can help x