Jump to content
Search Community

Embed Video in SVG with animated text overlay

swampthang test
Moderator Tag

Recommended Posts

Wondering if anyone has any experience with embedding video in an svg in combination with text. In the codepen, clicking the play button (in Chrome) reveals the text fading in (opacity) but it promptly disappears. I read here that you can embed video elements in a container such as a g, etc., but I could never get the video to display that way. I'm using foreignObjects but the video seems to "cover" the text unless it's animating.

 

Any idea what might be going on?

See the Pen eYZmxEg?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Hey, @PointC, thanks for the reply. I want to be able to layer text, images and video all within a master SVG. I built a video creation app that already does all of this except allow stacking for video elements in the same stack as other elements. Currently, the user can add videos but all the videos are behind everything else, iow, they're not located inside the main SVG. I use that main SVG to build a PNG sequence and then stack all the animations on top of the videos.
 

I'm looking for a way to allow videos to live among the other elements so a user can place them anywhere in the stack they want. I'm just experimenting with it right now but hoping there's a way to do this and leverage GSAP as the animation engine.

Link to comment
Share on other sites

4 hours ago, PointC said:

I don't use foreignObjects..

I understand, Blake has told me more than once to beware the evil foreignObject but I need a way to allow users to type and wrap text in a container. At this point, text is the only thing I place in a foreignObject. All bitmap images go in a nested SVG containing an image element and vector images go in as a nested SVG.

Link to comment
Share on other sites

17 hours ago, swampthang said:

I forked the above pen and changed the fromTo opacity to go from 0 to 0.99 for the text instead of all the way to 1 and it remains visible.

It's a Chrome bug. Your original pen works fine in Firefox. Your image doesn't show in Safari and the same issue as Chrome appears in Brave (not surprisingly). 

 

opacity: 0.99 forces the browser to spend more effort rendering it. You can do the same thing using will-change: opacity or transform: translateZ(1px).

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Awesome, @ZachSaucier! I added it to this fork.

 

See the Pen GRZJyYy by swampthang (@swampthang) on CodePen

 

I had tried dynamically adding everything in that fork yesterday thinking it might make a difference but it didn't. So, I implemented your suggestion by adding a "changing" class (with will-change: opacity) just before running the animation. But, it's recommended here that you use will-change sparingly. So, I removed it after the animation was finished but it disappeared again. So I added the z = 1 thing after removing the class and it works!

 

Thanks so much for the suggestion!

 

By the way, I only need this to work in Chromium because it's in an Electron app.

Link to comment
Share on other sites

8 hours ago, swampthang said:

I had tried dynamically adding everything in that fork yesterday thinking it might make a difference but it didn't. So, I implemented your suggestion by adding a "changing" class (with will-change: opacity) just before running the animation. But, it's recommended here that you use will-change sparingly. So, I removed it after the animation was finished but it disappeared again. So I added the z = 1 thing after removing the class and it works!

 

That's just a stacking context issue. Changing opacity creates a new stacking context. Hover over the red box. It changes the opacity to 0.99. 

 

See the Pen 1f2de9ab6d73e8e95930327d440351e0 by osublake (@osublake) on CodePen

 

I wouldn't worry too much about removing will-change from something you animate. That recommendation is so people don't use it on everything. In Firefox, it will give you a warning if you go over the cache size for will change.

 

  • Like 4
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...