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

youtube

#1

Here is part of an experiment for a tutorial I’m making on Syncing video with text and animations and other stuff. Let me know what you think! Aesthetics aside it’s just a rough copy :wink:

Syncing stuff within Hype

D


Animated Videos with Quizs
Is it possible to view the timing when we preview our animation in a web browser?
Youtube Play Pause API function
(Greg) #2

Pretty nice, how did you get the text to type out letter by letter?


#3

I used an external JS script called typed.js

You can do it by animating the innerHTML property in Hype but it takes a lot longer. Very tedious.

D


(Jonathan Deutsch) #4

Wow, very cool. I know many users looking to do this; how was it done?

It seems to stand up very well to me pausing the youtube video.


#5

Hi Jonathan,

I used a few techniques to play back video from youtube (even used their API) but in the end I settled on media element’s library which places a nice wrapper over the video and makes it easy to add it to hype and also to interact with the timelines and Hype’s javascript. I’m now looking into adding the slides capability in order to make it easier to add timelines or scenes at certain points using WebVTT code. Like normal slides but with interactivity or animation.

Once I’m finished of course I’ll upload templates :slight_smile:

D


(Bas) #6

Yes that is so great, youtube does manage its video streaming very well.
I myself am using H264 video in Hype and making video’s start and stop through javascript, but I realise that the streaming and buffering of the H264 video’s that have embedded in hype (so pure HTML5 video out of the Hype resource folder) really sucks. This especially happen when I start a video half way to play a couple of seconds there, it seems the standard HTML5 video is just trying to load the whole thing from the beginning.

Is there any way to make the streaming and buffering of HTML5 Video work better, or is working with a hosting platform like youtube a far more easy solution?
Looking forward to your thoughts here.

All the best,
Bas


#7

There have been some attempts at making a HTML5 video system that switches between SD and HD: http://www.miracletutorials.com/switch-low-to-hd-video-part1/ is one example. Sublime Video had an implementation which might still work: http://docs.sublimevideo.net/releases


How to create text scroll effect
(Bas) #8

Thank you Daniel for the tip,
Altogether I do think I need to figure out how to work with the youtube api, does do you know anybody that have a basic example of working with this as a starter … I hope that @DBear can send me the sample file he is working on, that would already help me out big time!
In any case thank you very much! Ill post back if I get on with it myself.


#9

Caught me on a good day! :slight_smile:

D

It’s not what I’m working on right now but it’s a file that uses the youtube API. Should get you started.

interactive-youtubeAPI.zip (23.6 KB)


(Bas) #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!


(Jose Antonio) #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


(Jose Antonio) #13

oh!!, thanks DBear

this example has all necessary


(Jose Antonio) #14

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

regards


Read Along Online Book
#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)


Changing a scene when a Vimeo video has ended
Expandable Banners
(Jose Antonio) #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


(Jose Antonio) #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


(Lucky) #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?


#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.