HTML video element making GPU jump to 100% - javascript

I have a video element in my Svelte project which uses 100% of the GPU no matter the size. Switching tabs or removing it makes the GPU go back to 0%, but even if the video is just a few pixels large, it still is running at max. Switching the options didn't work either.
If it helps, its an mp4 video and is about 30 seconds long and 116 mb. Im also on Microsoft Edge.
Tried it on a laptop and it ran fine, also on Edge but not using Svelte.
Don't know anything about streaming optimization though.

Related

Konva animation and drag'n'drop are super slow on my Xiaomi device

I have an app written with Konva.js, and it works really smoothly on both my 13-year-old PC and my wife's iPhone XR - it's just perfect. But whenever I run it on my Xiaomi Redmi 9 Pro and also my older one, Xiaomi Redmi Note 4X in many different browsers including Chrome, Opera and Firefox, it is really slow. I have animations using Konva.Tween and also some draggable nodes, and both of them work unbelievably slowly, FPS seems to be close to zero.
The strangest part is, I tried moving draggable nodes to a separate layer right before the dragging starts, and it doesn't speed up dragging at all, not one bit, at least visually, I didn't measure the actual FPS. So to me it seems like I am facing a limitation of my phone's performance here or there's something else which I do not see.
What is it that might cause the issue?
First, you should run the performance profile on your phone and take a look at what exactly is slow. Konva code execution? Native 2d canvas rendering? Browser layout work?
Also try to experiment with Konva.pixelRatio property https://konvajs.org/docs/performance/All_Performance_Tips.html.
Konva.pixelRatio = 1;
The image may be blurry on HPDI device, but probably it will be good enough. Probably default pixel ratio is too high. You can try different values like 1 or 1.5.

How to flip a video on chrome mobile using css (when in fullscreen mode)?

I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.

Adobe Animate HTML5 Canvas issue w/ Google Chrome only. Animation is Lagging

We have published an HTML5 Canvas through Adobe Animate. And have reduced the file size down to under 2MB total and it loads in under 3 seconds on all browsers. But we are having frame (FPS) lagging issues on Google Chrome only.
We deactivated the 2D canvas chrome accelerator in Chrome Flags, but are still having issues getting the animation run smoothly at larger screen sizes.
Is there a way to publish the canvas in Animate so this doesn't happen? Or is there some JavaScript code to allow for Chrome to load the animation at the correct FPS?
We have tested in IE, Edge, and FF and all of those browsers run smoothly. It is only Google Chrome that is experiencing the issue.
Having profiled this, I have found that the code makes a large number of calls to drawImage. On my machine, it spent 86% of its time in calls to drawImage.
Its possible that its redrawing the large images every frame. See if there is a way to stop this from occurring.
Try removing the background images and having just the lines, if the lag disappears, you have your answer.
Potentially relevant:
Why does chrome struggle to display lots of images on a canvas when the other browsers don't?

createjs ipad low performance

the situation is as follows: there is an HTML5 game. The game is quite heavy in terms of the javascript code, graphics and sounds – approximately 30 MB. All the animation is created by means of createjs. In the game I use 2 canvases one over the other; the control buttons are between the canvases (the buttons are created by means of the standard button elements).
One canvas is the main one and most of the animation is implemented on this canvas; the second canvas is used when it is necessary to show the animation over the control buttons. Initially, the size of each canvas was 970px x 740px. All the animation worked perfectly in desktop browsers as well as in Chrome and FireFox in Android. However, in the mobile Safari browser the animation worked very slowly.
Then I reduced the size of the canvases by 30 % (accordingly to the graph on the sprite sheets). As a result, Safari started working more efficiently on an ipad. The animation of the lower canvas stopped hanging but only unless the extra animation was launched on the upper canvas. Then everything got slow again. I don’t apply WebGL because I have to use both bitmap and the vector graphics. Who knows how to improve the situation in this case so as to prevent the FPS from falling, could you help me, please?
There is another funny thing: if you minimize the browser and then maximize it again, the game starts working faster from time to time.

Chrome 24 vs IE10 Scrolling Horrible Lag

I am currently developing a web application focusing primarily on Chrome 24.01312.57 and IE10. In the former browser, I am experiencing a large amount of lag. However, the latter experiences little to no lag, which is quite opposite to what everyone claims.
To show you the difference, I am recording the screens of my netbook using an iPhone while scrolling down The Chrome Webstore - something Google itself created.
Testing Equipment
2 year old Gateway Netbook -Single Core Intel Atom - 1GB RAM - Win7
iPhone camera (not that great recording solution, but it is quite easy to spot the difference)
Website: https://chrome.google.com/webstore/category/home (I scrolled down quite a bit for both the browsers before starting the test for those worried of AJAX loaded content slowing down the rendering)
Results
Google Chrome 24 (No extensions) scrolling down the Webstore:
http://www.youtube.com/watch?v=njkRqiNJPIY
Internet Explorer (No addons) 10 on the same page:http://www.youtube.com/watch?v=B_E_9OzPers
Note: Look at the mouse cursor and the scroll thumb - on IE10, the mouse is always on the the thumb whereas Chrome, it is all over the place indicating a high latency between mouse movement and the actual rendering.
Bottom Line:
Before I conclude, do realize that these lags on Google Chrome are increasingly magnified as the website becomes more complex and/or the specs go lower. However, IE10 is pushing the FPS quite high even in these conditions. I also did some analysis of the Chrome timeline. In reveals that the FPS drops as you zoom out to the point where rendering takes up to ~900ms per frame (on the Google Webstore) while IE10 is still fluid smooth (and better yet it retains that smoothness on an atom netbook)
As web developers, is there some CSS property/ies that is causing Chrome to render the pages with lag?
Why is Internet Explorer rendering so quickly?
What can be some steps to make Chrome render as quickly as IE10?
PS: Bug Report: http://code.google.com/p/chromium/issues/detail?id=163092 but no recent developments on this currently.
Chrome struggles with painting, especially at high resolutions such as 2560x1440 and above. Many websites such as the Chrome Web Store, Facebook, etc. exhibit significant scroll lag on it. IE10 maintains 120 fps on my monitor while scrolling on these sites.
I just had and fixed a similar issue.
Apparently Chrome isn't too smart about their recalculation of styles, besides that being terribly slow, so I focused on preventing it from recalculating anything.
I added the 'scrolled' class whenever the scroll event was triggered, but if it was already there, Chrome kept recalculating the new styles anyway. When I modified it to be like:
if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }
Chrome suddenly experienced a significant speedup (still no IE or FF, but much better than before)
It's the video card on the Netbook! You will experience similar effect on almost everithing that moves on your screen.
I have a Netbook...
The web you are testing crashed Chrome browser until not long ago...

Categories