last day (15 days later) » 

10:58 PM
0
Q: What is the most efficient way to clip a video running through canvas

paceauxI have a situation where I need to clip either images or videos. The images or videos need to be able to overlap. We tried this originally with SVG, but for various reasons, that didn't work out well, so now we're doing it in Canvas. This worked out fine for images, but when it comes to videos,...

 
What do you mean by "overlaps"? Not certain what issue is?
 
The issue is that the page runs extremely slow. "Overlaps" means that the image from the video should be clipped, and overlap the image that sits above it. making it look like the video/image isn't rectangular, but cut out at angles.
Still no. I'm looking for exactly what you see in the codepen. Two separate containers. one might contain an image. Another might contain a video. Each container will have either video or image, and will be "clipped" at an angle. Text like from HTML, will sit over the image/video. So the bottom edge of an image in one container will visually display underneath a top edge of what might be a video. I don't need help with how to do it (I've already done it, and it works) I need help getting the page to perform better.
 
"I need help getting the page to perform better." If only an image and a video are rendered why are canvas and requestAnimationFrame necessary? How is performance currently measured?
 
@K3N your page didn't have any lag. which was amazing. I'm definitely sure I'm doing something wrong. just not sure what.
@guest271314 Right now I'm not "measuring". When I apply the code you see on a real page, scrolling and other on page animations lag when the video is in view. Also, Chrome's Task manager window starts showing that the tab is consuming a lot of memory and CPU when the video is in view. Canvas is being used because we had too many cross-browser issues when trying to use SVG for this technique.
 
Why are canvas and calls to requestAnimationFrame necessary? You can use video and img elements, css to render same effect?
 
10:58 PM
@guest271314 I'm not sure if I understand your question. We're doing this through canvas because attempts to use CSS and SVG to "clip" the media didn't work consistently in all browsers. requesAnimationFrame is there to keep the video running through Canvas. Isn't that what you're supposed to do to run a video through Canvas? or is that what I'm missing?
 
The video and image do not render the same as image at Question at chromium. can you include css attempts at Question?
 
Could you explain what you mean by CSS attempts?
 
"We're doing this through canvas because attempts to use CSS and SVG to "clip" the media didn't work consistently in all browsers." Can you include attempts to render the effect using css at Question? Where using css would substitute for canvas, requestAnimation frame.
 
I'm not sure how that's relevant to the question that I'm currently asking
We're able to succesfully achieve the desired clipping effect now, using canvas.
 
If the Question is concerning performance only, substituting css for canvas and requestAnimationFrame would resolve Question.
 
11:04 PM
You're suggesting to not use Canvas?
Because that's not an option. We can't achieve this effect in all browsers using CSS.
(all browsers = IE10+)
 
Have not read and parsed the entirety of the javascript at Question, though if drawing onto canvas with requestAnimationFrame is apparently affecting "performance", removing those element and function calls from process would reduce issue with performance.
 
but then it wouldn't animate.
would it?
 
Though note, without any metrics as to "performance", it is not possible to actually measure performance.
What do you mean by "animate"? The only effect visible here is an angle at frame surrounding either image or video.
 
no
have you looked at the codepen?
the video needs to play. underneath text. and be cropped out
 
Yes. If only effect is text you can use <track> element to render text over a <video> element. `
 
11:09 PM
that is not the question
The text will not be a <track> element because, for this particular case, that would not be the most semantically appropriate text to use
and, again, the type of text isn't relevant
We cannot achieve this specific clipping effect consistently in all browsers using CSS or SVG (We've already tried). Canvas is the only thing that clips a fluid background image or video consistently in all browsers. however, using Chrome's Task Manager, I see memory increasing dramatically. and on production-quality pages, scrolling becomes exceedingly slow
 
"The text will not be a <track> element because, for this particular case, that would not be the most semantically appropriate text to use" ? Then the Question is not clear. Do not visually observe any animations at codpen. You mention "performance", though do not provide where using css was not possible to render an angled frame surrounding an img or video element.
 
you don't see a video playing on codepen?
 
Yes, though that is not an animation. That is a video playing.
 
no
it's a video playing through canvas
ergo: animation
 
Video playing at canvas is not animation.
 
11:14 PM
fine. it's not animation. it's a video playing through canvas.
 
That is drawing an image to canvas using requestAnimationFrame. You can use css to create an angled surround effect at img and video elements. Though you have not shared your attempts to achieve the same?
 
because they aren't relevant to the question. The question is why does the page take up so much memory. Not, "how do I do this in CSS"
 
Playing video through canvas is not necessary. The actual Question should be how to create an angled surrounding frame around video and img elements using css, to avoid using canvas, requestAnimationFrame, though it is your Question. You do not take up memory by not using canvas and requestAnimationFrame.
 
no it isn't. That is not my question. I know how to create the angled frame three different ways. clip-path doesn't work in IE10. SVG doesn't work well with a fluid width in firefox.
it is quite specifically why the JavaScript is causing the browser to be slow. And I know it's something to do with requestAnimationFrame. I don't know what
telling me, "don't do it that way" doesn't answer my question of, "what is the most efficient way to clip a video running through canvas"
 
You are drawing an image repeatedly. Why would that not increase memory usage?
 
11:19 PM
I expect that it should. but as K3n illustrated with two examples in a matter of minutes, he was able to pull it off without causing the browser to lag
 
Then use examples by @K3N. Though from perspective here, asking for "most efficient" is just that, regardless of technology used.
 
His examples just don't follow the requirements I have
but, my question for him will be, "why is your canvas painting without causing so much lag"
 
If as css solution were posted, which meet requirements, would that satisfy "most efficient"?
 
@guest271314 fair enough
I'm looking for "most efficient within JavaScript" not most efficient in general. Though I thought the phrasing of my question assumed that I was speaking specifically in JavaScript
 
11:37 PM
Draw the canvas once or style element, leave transparency for img and video to display through.
 
again. not the solution I need. The image/video has to be clipped so that a background image from a previous container shows through. So it's not a simple case of partial transparency, unfortunately
but k3n does something different from what I do
his canvas "drawing" happens outside of the animation loop
 
Not certain why "most efficient" is in title of Question? Question is how to use requestAnimationFrame correctly, or correct memory issue with current javascript, not efficiency as to least amount of resources needed to render expected result?
 
"optimal"
whatever means, "the browser doesn't grind to a screeching halt"
 
Still not exact as to requirement. You want to use the pattern at Question, not css, which would reduce resource needs. "optimal" is not same as correcting issue with existing javascript. Optimal does not specify that only one pattern can be used.
 
The requirement is in the screenshot I provided.
 
11:46 PM
Yes, css can be used to achieve the screenshot, without canvas or requestAnimationFrame.
 
two containers, each may container an image or a video. 100% width. Text will sit over top. the image/video will be clipped at some sort of angle. They will also overlap slightly, to look as though the images aren't rectangular
in IE10+ ?
And it can be a fluid width
Can you provide a cross-browser example
If IE10 supported clip-path, this wouldn't have even been an issue
 

  last day (15 days later) »