Independent composition doesn't seem to work for the rendering process of my video. My ads are broken too. They remain black and give an error:
Independent composition is disabled for video rendering. This can
negatively impact performance
I'm using the GoogleIMA SDK.
From MSDN:
The HTML5 video tag is an element that is explicitly targeted for
independent composition. Independently rendering and composing HTML5
video enables a fast and smooth media playback experience.
I don't know why this doesn't work, is this a bug?
I'm not sure if it's a bug or intentionally done this way (Not sure since it's pretty weird that video gets dropped from independent rendering).
But i do know how to fix this. The way to fix it is to look for CSS animations/transforms on the <video> element. These are usually suspect of a <video> element being kicked out of independent rendering.
Hope this helps!
For those that wandered in from a Google search like I did, but the marked answer does not solve your issue
If there are no animations on your <video> element, but you are still getting this error, make sure you don't have the
transform-style: preserve-3d;
property in the style it may also break Edge, with the solution being to remove this property or to pray that Edge goes away some-time soon.
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.
I am writing an introductory HTML course. I remember discovering 9 years ago as I was learning HTML that both <img> and <image> worked as the tag for displaying images, at least in IE. Indeed, <image> still works in the latest versions of the 5 top browsers.
I realize that <image> is incorrect and will not validate with http://validator.w3.org. However, is anyone aware of a browser that will not display an image if <image> is used instead of <img>?
Furthermore, I assume the modern browsers display images created with the <image> tag simply because it is a common mistake that beginners make. Is this assumption correct?
Yes and no. As you point out <image> has been a synonym for <img> for a long time. I believe it was an early Netscape browser that first did this, possibly to compensate for user error, or possibly because there was dispute at the time whether the element should actually be called <image> or <img>.
Anyway, as pst points out, once it was implemented in a browser that dominated the market of the time, web pages came to rely on it. Its persistence is then down to commercial pressure on the browser manufacturers. If all the major browsers support it, then Browser A decides that although it supported it in Version V, it won't support it in version V+1, as soon as version V+1 is released, they get lots of messages saying "Site S is broken in your latest browser. You browser is rubbish. I'm going to switch to browser B".
The HTML5 parsing spec requires that the <image> tag is mapped to the img element at the tree construction stage, so there can never be any justification for using it.
I would be less concerned about browsers, than other HTML consumers, such as the lesser known search engines. I believe that the image for img synonym is not widely known, and the many such tools would therefore fail to pick up <image> as referencing an image resource.
They have different usages in SVGs. The image tag creates a specific element in an SVG and can not be replaced by the img tag.
Fiddle Example
I just finished debugging this problem, which I was committing, having not previously read the above answers.
While not full-blown browsers, an email client is often used as if it were a browser.
I discovered, the hard way, that the Android Gmail client, using naked HTML (with a default naked DTD specification), does exhibit this problem. It only responds to <img /> [i.e., not <image />]. gmail.com is fine with <image />, but not the Android gmail client.
While an email client isn't really a browser, I thought you might be interested anyway.
Indeed. Modern browsers will display code that is not valid in order to make sure that old websites still display correctly and slightly-invalid code doesn't screw up a page.
For example, forgetting to close a <tr> before you open a new one - all modern browsers will simply assume you closed it.
I'm not aware of a well-used, up-to-date browser that will fail to display an <image> tag, but will display an <img> tag.
Image is used by the DOM and is why it maps to the img tag in the html. Notice when you use background-image in css or drawImage in javascript, it is fully typed out.
Img is identified as an html tag referencing an image. A side note is that you can now use the <picture> tag besides <img> tag in the html.
The <picture> tag in HTML5 has/uses the properties that <audio> && <video> tags have. It helps remove issues with mobile device sizes and todays hi-res images.
What works well on desktop still renders properly when applied to a phone or table size screen.
See ~://quick over-view of picture vs. img
<style type="text/css">
.hidden-image-container {
display: none;
}
</style>
<div class="hidden-image-container">
<img src="lulcats.png" />
</div>
I'm mainly interested in what mobile browsers make the optimization of not downloading an image that's in a hidden container.
This would allow me to signficantly reduce initial download time.
Related reference question about loading images across devices
Someone has tested this before:
http://www.w3.org/2009/03/image-display-none/test.php
Edit:
Looks like the list does not contain many mobile browsers (yet).
I would never call it an optimization for a browser to not download a hidden image. That might have dozens of good reasons and should (and will) still get downloaded by a browser. I don't have some table of numbers or browsers but I'm pretty much sure all mobile browsers will also download such an image as soon as the interpreter spots it.
I'm afraid there is no silver bullet to conditionally load <img> tags with just html/css. Right now you'll need at least a little piece of ecmascript, but as always, I'm very sure the stackoverflow community will correct me if I'm wrong here.
The <img> node has no property like .preventLoad (which would indeed be quite useful). Maybe it's time for a whatwg proposal, I'll join and support it :-)
I am looking more heavily HTML 5 now, but I keep coming back to one issue and that's the practicality of using it without shooting myself in the foot.
Most of the site I work on are for SMEs that target customer bases that typically use IE7 or 8 and a surprising number don't enable JavaScript- something stupid like 10 - 15%.
This means I cannot rely on visitors having up to date browsers and I can't rely on the JavaScript fixes (such as modernizr) to compensate. I've seen some very powerful arguments for how HTML5 can really speed up Dev time and makes things so much easier, but how do you maintain graceful degradation when implementing?
the extent of HTML5 implementation you're looking at is the key to a solution. let me illustrate this with the following:
take for instance now the HTML5's video attribute - it is a fairly common practice to put in place a flash fallback for incompatible legacy browsers so that regardless of the situation, everyone gets to view the video.
question here is: "so what do I use as the markup? HTML 4.01, XHTML 1.0 or HTML5?". the answer, naturally, would be to use the HTML5 markup because the video tag is in fact a HTML5 one. in part, the answer is not wrong, but it is also not completely correct; at this point of time when browser support for HTML5 is not full and the markup has yet to hit the recommended stage it will be unwise to mark it up at HTML5 because legacy browsers will just give you a blank look. Instead, if there is to be any graceful degradation of sorts, then your HTML document should be marked up as XHTML 1.0 or HTML 4.01 and then included with the desired tag, which in this case for an example is the video tag. Legacy browsers will render our DIVs and CSS styles correctly but will not recognize the video tag and will instead go to the Flash fall back video.
so i suppose that once you have a more targeted idea of the extent you'd like to use HTML5 within the constraints of legacy browsers and the lack of JavaScript support, you should be more than able to figure a way out
also, though HTML5's support an compatibility is not yet fully realized, it doesn't mean we should avoid it like a plague. give it a shot and fall back on some common methods like the example illustrated with the video tag (read diveintohtml5. it's a fantastic resource!).
just my two cents' worth. hope it's helpful some how.
(heres an example of a site that I designed and co-developed with an agency - http://www.blueprint.sg. it's marked up in XHTML 1.0 but uses the tag for a full screen background video. falls back to a backgroun image for browsers unable to recognize the tag. PS: apologies in advance for the not so good design and the annoying playing of the video which is currently set at "autoplay" so it'll play and load at the same time.)
If your users use IE7 - 8 and often have disabled JavaScript, then HTML5 isn't for you right now, for these customers anyway.
Horses for courses as they say and in your case it would seem that the safe bet is to stay with HTML 4.01.
Users with JavaScript disabled can create many frustrating circumstance for any web developer. But really pretty much the only thing you can do is alert the user of the limitations, I generally use the NoScript html tag.
I have a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.