Jump to content
Search Community

Mixing in HTML5 video? Possible?

Mr Pablo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Due to various issues, my animation platofmr moved away from Canvas and CreateJS to GSAP and CSS3.

 

We are really happy with the results of GSAP and animations play smoothly on various devices.

 

The issue now is how to re-integrate HTML5 video with GSAP,

 

Has anyone approached this at all? Mixing in GSAP CSS3 Tweens with HTML5 Video?

 

My initial thoughts where to try and combine CreateJS and GSAP (seeing as they both have callback functions) but until I do some tests, I just want to get some ideas on how the two could possibly be mixed together?

 

Thanks,

 

Paul

Link to comment
Share on other sites

hello..

 

im little kind of confused by your question..

 

what do you mean by mixing GSAP CSS3 Tweens with HTML5 video? do you mean animating the video's container, in and out, or around?

 

what are you trying to do with the videos as far as animate or with CSS3 tweens?

 

any clarification or info would be very helpful, thx

Link to comment
Share on other sites

Ah sorry if I'm not too clear in my explanation.

 

Currently, I am using GSAP Library (TweenMax, TimelineMax etc) which is all based on CSS3 and uses the DOM to display objects (text and images).

 

I need to somehow mix in the HTML5 <video> element and have it work as if it was a CSS3 animation.

 

e.g. CSS3 animation -> Video -> CSS3 Animation.

 

The problem I can see straight away is that I don't think GSAP caters for Video, i.e callbacks, starting and stopping etc.

Link to comment
Share on other sites

Hey Paul,

 

What you could do is find a video library that works with callback and merge the GSAP callbacks with the library's in order to create some kind of sync between playback and GSAP animations.

 

I'm far for being an expert in HTML5 video, but I believe that there are some hardcoded functions to control playback, right?, perhaps you could use the vast range of callbacks GSAP has to offer to control your playback and you could also take advantage of delayedCall() to use the engine's timing mechanism to control your playback.

 

I'll google for some info on HTML5 video libraries and if I find anything that has callbacks I'll post a reply.

 

Perhaps this could help:

http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx

 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

 

Best,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

is the video your using being pulled from youtube or vimeo?

 

if so they have a API's to control playback and such...

 

youtube playback API:

https://developers.google.com/youtube/js_api_reference

 

vimeo playback API:

http://developer.vimeo.com/player/js-api

 

if your encoding your own video.. HTML5 VIDEO, hasn't been set in stone as far as video codecs as a standard..

 

so you  can use a polyfill to bridge the gap:

 

http://mediaelementjs.com/

 

also checking browser compatibility for the video tag element and codecs:

 

http://caniuse.com/#search=video

  • Like 1
Link to comment
Share on other sites

rhernando - yea, CreateJS (a canvas library) has callbacks, I'm going to try use that.

 

jonathan - i am not using hosted video. The video files will be stored locally on the device.

 

jamie - if you read my post(s) you'd see that i have both GSAP CSS3 animations (that use DOM elements) and I need to throw HTML5 video in between them. Yes they are separate, hence me asking how to implement this. It's not a case of trying to play the video, that is easy. Its that fact I need to try and mix HTML5 video into CSS3 animations (at least, have it play in between animations, not necessarily part of the actual animation)

Link to comment
Share on other sites

sorry im still kind of confused on what your trying to accomplish..

  • do you have an example of what your trying to achieve?
  • what do you mean by mix html5 video into css3 animations?
  • do you want to animate the video tag / container, etc.. ?
  • what type of animation do you want to do?

thx for any clarification :)

Link to comment
Share on other sites

I did read all of your posts Pablo but I was specifically confused by the fact that you said you saw problems animating something with GSAP and playing video (also the <video> tag is a DOM element as well, so they're not unrelated in that regard).

 

Take a look at these and tell us if any of this resembles what you had in mind.

 

animating something and playing a video at the same time

 

See the Pen uefco by jamiejefferson (@jamiejefferson) on CodePen

 

And like I mentioned, jPlayer, or any HTML5 video library really, makes it easy to have all of the video events available across multiple browsers. Some even include a transparent fallback to flash for older browsers.

  • Like 1
Link to comment
Share on other sites

I did read all of your posts Pablo but I was specifically confused by the fact that you said you saw problems animating something with GSAP and playing video (also the <video> tag is a DOM element as well, so they're not unrelated in that regard).

 

Take a look at these and tell us if any of this resembles what you had in mind.

 

See the Pen qdolA by jamiejefferson (@jamiejefferson) on CodePen

 

See the Pen uefco by jamiejefferson (@jamiejefferson) on CodePen

 

And like I mentioned, jPlayer, or any HTML5 video library really, makes it easy to have all of the video events available across multiple browsers. Some even include a transparent fallback to flash for older browsers.

 

Ah, your second example is pretty much the start of what I am after. (although I cannot see any actual video, just a black square?)

 

The reason I saw a potential problem, is because in the past, I worked with video added to a Canvas, with other assets layered on top etc, which worked fine. But now that I am using GSAP (CSS3 based, not Canvas) I was unsure how to approach this 100%.

 

 

Jonathan - no example, I've not seen it done, hence me asking if it's doable. By mixing the two, I mean, play a full CSS3 animation (done via GSAP) and after it finished, play a HTML5 video, and after the video ends, play another GSAP animation. The video tag doesn't need to animate in any real sense (maybe just a fade in/out?) And I already have my animations. See Jamies post for an example of what I am after.

 

Now I just need to see if I can can apply the example to my project.

Link to comment
Share on other sites

I see what you mean by Jamie's example..

 

GSAP will be able to do this!. GSAP can animate attributes, css properties, css rules, DOM elements, canvas, javascript object properties, and much more. So i don't see a problem with GSAP not being able to do what you want to accomplish.. its the best animation platforms for Flash and JavaScript.

  • Like 2
Link to comment
Share on other sites

I see what you mean by Jamie's example..

 

GSAP will be able to do this!. GSAP can animate attributes, css properties, css rules, DOM elements, canvas, javascript object properties, and much more. So i don't see a problem with GSAP not being able to do what you want to accomplish.. its the best animation platforms for Flash and JavaScript.

 

Yea I was under the impression GSAP was only for CSS3 stuff. guess the documents don't make it super clear what it can do (there are no examples of it interacting with video)

 

Just had a go, and got video elements working nicely with my CSS3 animations. Just hope it performs well enough on my devices,

Link to comment
Share on other sites

I kept the example as barebones as I could to illustrate the basic concept before doing anything fancy, but I've gone back to tidy it up so its hopefully more clear what is happening.

 

In the HTML of that codepen you will see the <video> tag has no src attribute, hence there is no actual video to play. I didn't think it would be necessary to make a video file and host it somewhere just to show the concept. The background color was added in the CSS so it wasn't invisible.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...
  • 10 months later...

Hi everyone,

 

I'm digging up some older topic because this one helped me a lot but it's still not perfect,

so I have a video (3 formats) and a cursor to controll it, but it's not smooth at all, even if I followed all recommendations from here.

 

I made a fork you can see here:

See the Pen WrerQp by fripi (@fripi) on CodePen

 

Any idea how to optimise this?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...