Syncing Video (Youtube, mp4, Vimeo) with text and animation

Share your Work
10

Hi @DBear,
Thank you very much, it will take me a while to implement it throughout the whole of my document, but hopefully at end of next month I can post back to you what I made of it. I really believe that Hype can be perfect for interactive video websites, so that is what im developing with it… it just needs some time but will definitely share the result here in the community once its done for others to use.
Again thank you so much for the kick starter!

11

Hi DBear,
How do you get syncing video youtube with timeline?

12

Here ya go!

Have fun!

mediaSync.hype.zip (186.5 KB)

*Edit All of the interaction is in the function “videoAPI” called on Scene Load. The timelines being fired are in the Symbol. All of the elements are hidden (display: none) at the beginning. In each call of the start timeline the elements are made visible (display: inline).

I forgot to add the media element resources. Add these to your resources folder.

resources.zip (165.0 KB)

D

1 Like
13

oh!!, thanks DBear

this example has all necessary

14

Hi DBear,
I’m trying syncing video vimeo, but it doesn’t work, how to do it works?

regards

15

Hi Jose, (@tony )

Try this. It’s a an updated version of the previous upload.

I have made 2 scenes. The first Vimeo and the second Youtube.

The Vimeo scene loads the vimeoAPI function which has the functionality. Using Vimeo’s Javascript API.

Hope this helps

D

mediaSync2.hype.zip (207.8 KB)

Oh and the resources in case you lost them

resources.zip (165.0 KB)

1 Like
16

Hi DBear,
Oh!! I will try, very thanks so much, for answer, man.
I’m completely sure that, it will works.
Again Thanks!!.

Now, I´m looking, what happens if I decided to rewind video, The conditions of “T++”, I understand, but how to do if I want to rewind the video ?

Regards

17

If you rewind the video and would like the same animation to play again you have to be a bit creative with your if statements and perhaps use another variable. Something like a variable such as “played”.

I cannot look at this right now but tomorrow I may be able to.

D

18

Hi DBear,

Yes, you have reason, but I want to video play in rewind, I’m looking do an animation, I’ve used jquery with a video.mp4 this work, but when I want to try to do the same with a video of vimeo this doesn’t work

19

Hey @DBear sorry to bump, but have you ever tried to sync to audio without video? I’d love to be able to animate to audio, without relying on the flash player. Have you had any success on creating audio elements and linking hype animations to them?

1 Like
20

Hey Lucky

Sorry, I’ve been away on vacation but now I’m back. I know it’s been a while but here is an answer.

As long as you create the audio in the same way as video then it should be straight forward to manipulate it and animate to it using similar techniques.

21

Hi friends,
Maybe someone here can tell me what I need to do to make it work on mobile.?

22

please help… with my question

23

Hi Eden!

Your question is painted with quite a broad brush and no details.

Perhaps if You posted an example project of your work to date - with specific questions about the issue(s) You are having - You might elicit a better response.

1 Like
24

Hi Jim,

I’m talking about this project - see the attached file:
interactive-youtubeAPI.hypetemplate.zip (24.1 KB)

Thanks.

25

Unfortunately you cannot overlay html elements over video on the iPhone/iPad. You’ll want to change the element positioning so it doesn’t overlap. (Also the iPhone doesn’t by default show videos inline, though there is now an option in iOS 10 that could allow for this, but it is dependent on youtube using it in their widget).

2 Likes
26

Really bummer.
What about Android devices …?

27

Actually I take that back - in testing it does now appear that iOS allows videos to be overlayed with other elements. (on the iphone you’d need to add a playsinline attribute; Hype will soon support this). Android also can do overlays.

In the case of your document, there’s something else going on… it isn’t even loading the youtube video properly on android or iOS. You might want to try getting that working first and then proceed to the quiz part.

28

Hi @all The reason for video not showing or working is due to an update in the media element JS and the associated API’s

Here are some updated documents:

Demo 1

Demo 2

Files:
ProjectFiles.zip (926.6 KB)

####*froogaloop is deprecated. Vimeo now has calls built in to it’s API.

1 Like
29

You can share the hype file…?