Triggered videos play fine via desktop browsers but not via mobile


(Fran Brennan) #1

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 :slight_smile:

Hope you can help.

Cheers in advance,
Frannie

interactiveVideo_test.zip (2.9 MB)


#2

It could be, because of the ID’s … just thinking out loud. Not a definite answer :slight_smile:


(Fran Brennan) #3

I keep coming back to that idea too… although I’m as certain as I can be that I’ve assigned them all unique ones.

Unless I’ve stupidly missed something glaringly obvious.

Which is entirely possible, haha!


#4

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. :wink:


(Fran Brennan) #5

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 :slight_smile:


(Hans-Gerd Claßen) #6

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

third part would be to check the videoformats …


(Fran Brennan) #7

Thanks, I’ll have another check of those id’s.

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 :+1: … so I’ll have another look :grinning:


(Jonathan Deutsch) #8

Try adding playsinline muted to the video tags. Ex:

<video id="video01sm" width="100%" height="100%" playsinline muted>
    <source type="video/mp4" src="${resourcesFolderName}/video01.mp4">
</video>

The video is playing with the popup, and I’ve found that it can be flakey with multiple triggers. Inline videos don’t have that problem.

(also muted might not be strictly required, but if you intend to play without direct interaction you may need it)


(Fran Brennan) #9

Big thanks…I’ll give that a go first thing in the morning and post feedback.

I genuinely appreciate the time everyone’s devoting to this, it’s a tremendous help. :grinning::+1:


(Fran Brennan) #10

Okey dokey… well your suggestion, @jonathan, has nailed it spectacularly successfully :sunglasses:

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 :slight_smile:

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.

Cheeeeeeeeeeeers all :grin: and thanks once again.

interactiveVideo_test.zip (2.9 MB)


(Jonathan Deutsch) #11

Glad that worked!

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.


(Fran Brennan) #12

Good point!!! Cheers for the great advice… I’m on the case even as I type! :grinning:


(Fran Brennan) #13

Sorry to be a pest but I was wondering if you could throw some extra advice my way? :slight_smile:

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 :slight_smile: 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

hypeDocument.getElementById('video01').play();
hypeDocument.getElementById('video01md').play();
hypeDocument.getElementById('video01sm').play();

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 :slight_smile: x


#14
if (hypeDocument.currentLayoutName() === "Desktop"){
    hypeDocument.getElementById('video01').play();
} else if (hypeDocument.currentLayoutName() === "iPhone"){
    hypeDocument.getElementById('video01sm').play();
}

Obviously, the video ID’s could be different depending on the layout name but you get the idea :wink:


(Fran Brennan) #15

FABULOUS! I was almost on the right track with what I’d been trying but not quite.

Huge thanks @DBear, you’ve made my day!!! :slight_smile: x