Any way to auto play video "On Enter viewpoint"?

1

Hello,

I am trying to put a video in A webpage project By “Inline”, unchecked “Controls” and “Autoplay”, Screenshot: http://prntscr.com/kpnwvv

By this way, I want the video only play “On Enter Viewpoint”. I found there is only option of playing sound, but no option for playing a specific video, Screenshot:

And I tried to make it work by custom behaviour, but it seems same situation.

I searched in this forum, but found nothing upon this feature. So, is it possible to make it play only “On Enter viewpoint” please?

Thanks

2

Instead of triggering a custom behavior, run a JavaScript file. Then, you could do this...

hypeDocument.getElementById('video1').play();

That’s from here...

Personally, I usually just have one main JavaScript file, where I manage just about everything in the project. It’s more work, but then I have greater control. It’s the same with video. I usually load the video with HTML code, instead of using Hype’s video element. That way, I can easily add captions. If I want to control the video, I just use standard HTML Audio/Video DOM methods...

3

Hi Photics,

Thanks so much.

I make it works:)

Another question please, I am trying to make a product image to be zoom in when page content is moved down, just like the iPhone X,


and you can check at: https://www.apple.com/iphone-x/

I mean I just want to make a product image or other element to be enlarged when navigated down, would you please let me know what is the javascript in Hype to do that, or how to make that work please?

Thanks so much.

4

Hi Photics,

Thanks, in my Hype project, there are two layouts for PC and mobile, and I found it require unique ID.
and I assigned IDs as: waterdrop and waterdropmobile,

so, I wrote in javascript:

hypeDocument.getElementById('waterdrop').play();
hypeDocument.getElementById('waterdropmobile').play();

Is this right way? or should I write two Javascripts for both mobile and PC layouts please?

Thanks.

Alex

5

Unless you use Advanced Export to separate layouts into different exports, a single document will have both layouts and their included DOM elements/IDs.

The Hype API has a hypeDocument.currentLayoutName() function that you can check against to conditionalize the .play() function. Example:

if(hypeDocument.currentLayoutName() == "Desktop") {
    hypeDocument.getElementById('waterdrop').play();
} else if (hypeDocument.currentLayoutName() == "Mobile") {
    hypeDocument.getElementById('waterdropmobile').play();
}
6

Hi @jonathan,

I tested you code, unfortunately, it does not work for me when I set the javascript running On enter viewpoint, so, for test purpose, I add to buttons of Play and Pause, and two Javascripts:

Play:

 if(hypeDocument.currentLayoutName() == "Desktop") {
hypeDocument.getElementById('waterdrop').play();
} else if (hypeDocument.currentLayoutName() == "Mobile") {
hypeDocument.getElementById('waterdropmobile').play();

Pause:

	if(hypeDocument.currentLayoutName() == "Desktop") {
    hypeDocument.getElementById('waterdrop').pause();
} else if (hypeDocument.currentLayoutName() == "Mobile") {
    hypeDocument.getElementById('waterdropmobile').pause();

but both of them does not work, what might I missed please?

or, you might like to check my hype document at

Thanks

Alex

7

Your syntax is incorrect.

It needs to have an extra “}” at the end.

if(hypeDocument.currentLayoutName() == "Desktop") {
    hypeDocument.getElementById('waterdrop').pause();
} else if (hypeDocument.currentLayoutName() == "Mobile") {
    hypeDocument.getElementById('waterdropmobile').pause();
}

5492C36B-DAC0-4A68-AF39-5B6EC3017E94
5492C36B-DAC0-4A68-AF39-5B6EC3017E94.jpg1328×410 314 KB

1 Like
8

Hi @DBear,

Thanks a lot.

For Play on enter and Pause on exit, I wrote two Javascript, one for play and the other for pause.

Play:

if(hypeDocument.currentLayoutName() == "Desktop") {
hypeDocument.getElementById('movie').play();

} else if (hypeDocument.currentLayoutName() == “Mobile”) {
hypeDocument.getElementById(‘moviemobile’).play();
}

Pause:

if(hypeDocument.currentLayoutName() == "Desktop") {
hypeDocument.getElementById('movie').pause();

} else if (hypeDocument.currentLayoutName() == “Mobile”) {
hypeDocument.getElementById(‘moviemobile’).pause();
}

Both play and pause work for PC mode, but both not work in mobile layout.
File at https://www.dropbox.com/s/p51i2otvux55sqn/bao_mechanizm.hype.zip?dl=0

what might be the reason please?

Alex

9

Hi @DBear

Thanks, Yes, it works, when I say it does not work for mobile, I mean it does not work in Wordpress, and there is a issue with wordpress same as this one How to make video align center please

it is invisible if not group it and make it align center.

Sorry for mislead you, it works fine now, and you may check the mobile mode at:

https://www.lovcour.com/baomachenizm

Thanks again.

Alex

10

But not sure why there are always errors at frontend:

Anyway to resolve it please?

Alex

11

Chrome gives a little more detail to help debug:

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22

Basically a play() and pause() call are happening in rapid succession.

It looks like the root cause is a bug in Hype where elements using flexible layout will trigger waypoints incorrectly. This has been filed to fix.

The easiest workaround is probably to use the on enter/exit actions on an element that is not set to use flexible layout, like an empty rectangle that is the same top position and height of your video.

(Interesting adding a try/catch block does not catch the error).

In your case it is pretty harmless, so you could also do nothing and I think be okay as well if you don’t mind a little console spew.