I'm a little confused by this one. A similar question was posted here:
How to deal with poor HTML5 video performance in Chrome?
but no satisfactory resolution seems to have come of it.
The long and short of it is that the HTML5 video element has a very poor performance in Chrome. Every other browser I've tried (IE9/10, Opera, Firefox, Safari, Safari iOS) runs absolutely fine but Chrome (for Windows) buffers very slowly and occasionally stops buffering altogether. It seems to ignore the preload attribute, although according to this article:
http://oddlystudios.com/blog/html5-video-problems-in-chrome/
it DOES preload, just limits itself at a couple of MB. This is definitely a recent thing, probably only affecting recent versions (I'm on 26.0.1410.64 m) and it's not only affecting my projects but also other sites including YouTube. It seems to be irrespective of file format, and only seems to affect longer videos (those of 5 minutes and above).
I guess my question is, has anybody else come across this phenomenon? If so, how do you combat it? In the other thread disabling the hardware acceleration for H.264 was suggested, but not only does this not work for me, but it's impractical from a development standpoint.
Yes Chrome itself preload just few of MB's among its entire video. The only approach taken by me was, to show loading progress bar while we load the entire video at background. once fully loaded the video, remove the loading layer and show the video to play ahead.
Related
Basically the title, whenever i play the video on firefox or chrome everything works fine. But on microsoft edge i get the following error:
Independent composition is disabled for video rendering. This can negatively impact performance.
Edge will play the first second of the video and then display "video couldnt be rendered". I can barely find anything about this error and have no idea how to go about fixing this or if this is just a bug on microsoft edge. On this website i saw something about disabling css on the video tag which i tried and still no luck.
I find one article and one thread for this error.
In MSDN issues page it was marked as fixed. So if you are using any older version then try to upgrade to latest version may solve your issue.
Independent composition is disabled for video rendering
In other SO thread, the solution for this issue was mentioned that,
The way to fix it is to look for CSS animations/transforms on the element. These are usually suspect of a element being kicked out of independent rendering.
HTML5 video turns black in IE and Edge
So you can try these two suggestions may help you to solve your issue.
So, I remember working on a project last year and running into this same issue - not being able to autoplay a video on an ipad since Apple is concerned with data usage charges. As silly as this problem seems, it keeps popping up again and again and has caused a major stoppage in the current project I'm working on (it seems to always come down to hacking away to make things work on the ipad now).
Anyway, the current issue is with Audio tags. I've built an HTML5/JS game engine and all works beautifully across all browsers, phones and tablets, but I'm dynamically creating audio elements for sound effects and scenery music.
Last I understood, the workaround was to have a single element that the user plays once, then you can dynamically change the src to be whatever you like - this obviously won't work in my case since a user can generate hundreds of different sound effects under different conditions. I've even seen some horrible "silent noise" hacks to work around this issue...
Not sure if anyone is going to request seeing code... but I'm just appending an audio tag with autoplay and a src. Works great everywhere, hoping that someone has a simple workaround (or perhaps Apple was smart enough to include a setting in the OS to allow for autoplaying?)
Thanks!
I've been using flash video for embedded videos on my site. My old 2.2.x android plays them fine but I'm noticing a lot of new android devices as well as apple devices will not play my videos because flashplayer is fading, so I'm investigating the solution - and HTML5 video seems to be the new thing.
I've just spent 2 hours searching google and read a lot of stuff but most of it is from 1, 2, or 3 years ago -- and judging from what I've read it looks like using the html5 video tag still requires each video to be converted to multiple formats, and full screen is some sort of vendor specific extension -- different on each browser which happens to support it.
So my question is whether HTML5 video tag is a full replacement for the flash player now, or is it still a kludgiferous scheme requiring browser specific hacks for half a dozen most popular browsers -- in 2013?
Does it work on PC's, Macs, Androids, and iPhones?
caniuse.com is a great resource for pretty good data to answer this question.
As of now...
~92% of web users' browsers support the HTML video tag. The main one that doesn't is Opera Mini (about 4.5%). For those users, you can use a Flash fallback, which is actually not too much work. There are a handful of very simple solutions that will handle this for you, like videoJS, jPlayer and JWPlayer.
For now, you do need to encode in two, possibly three formats. About 92% of users support MPEG-4/h.264. Opera Mini and IE8 do not support it.
Only about 71% of users can support full-screen HTML video, so for Android and iOS (mainly), all versions, the best you can do is set the video to fill 100% of the browser window. If full-screen is that important, then you'll want to use Flash.
So, in short, yes, HTML5 video does require a little extra work, but at this point, it's not that hard to get right, and it's a standard that's moving in the direction of better stability and uniformity. YouTube, for example, uses it (with fallbacks), if that's any indication that it's ready for prime time.
I'm working on a page turn animation. The performance is disappointing. Particularly if you take the pages class and make it something like 800px wide (paste $('.pages').css({width: '960px', height: '600px'}); into your console). I used to have around 16 transitions running at once and reduced it to 9, many of which are transforms! I don't know what else I can do.
Chrome does not seem to be using the GPU. It spikes the FPS on initial page turn but then dips down at regular intervals (enabled this with about:flags):
Try it out in Safari and you will get better performance but see that the animations do not sync up, often lag behind each other, and there's a weird wobblyness that Román Cortés's project also suffered from in the same browser (I haven't made it work in Fx yet).
There hasn't been much good material about how to optimize CSS transitions and animations on the web and I've been mostly teaching myself. I was hoping someone would have this kind of advice.
In order to take advantage of the GPU you have to use translate3d(x,y,z) instead of translate(x,y) in your -webkit-tranform's. This will force Chrome to use the GPU to render the animations.
Beware that while the performance will greatly increase if the computer has a good video card, it will also degrade on a slower hardware.
Here's a page flip I did for our launch of Sencha Animator. It's also inspired by Ramon Cortes' original, but uses different mechanisms - as far I as remember. It's super smooth in Safari and on iOS, but kind of jerky on Chrome desktop. Haven't checked it in Android 4 yet though.
I'm using Chrome 17 on OSX, and it seems fine - runs at around 20-30fps, no dipping or graphical issues. I suspect that this is just an issue with older Chrome builds.
Animating box-shadows and -webkit-gradients is very expensive, try removing them temporarily to see if it improves performance. If it does, see what you can do to replace them with images.
When loading a website (censored), it hangs for a couple of seconds before loading the page (up to a minute on older ones of internet explorer)
In other browsers it works fine.
It's a basic wordpress website with a couple of javascript and stylesheets, nothing to fancy. Firebug doesn't show anything weird in the NET-panel, all files exist.
Also with some other sites using the same plugin (for the properties), the same problem exists. So it should be plugin related, but I can't find why.
Any suggestions?
I loaded up IE9 and it loads quick. However, if you turn on IE9 dev tools, go to network, switch to IE8 standards mode and start capturing, you will see a lot of 404s on images that do not occur when using IE9 standards. This may be the issue. Good luck. – Matt Feb 23 at 16:55
Just to get the question answered, thanks #Matt