I'm experimenting with CSS transforms and I noticed that embedded videos (like for instances the ones from youtube) don't behave as expected when a CSS transformation is applied to them.
I've tested this in the latest Chrome, Firefox and IE and none of them was able to display transformed videos.
Is this a bug of sort, or are videos not supposed to obey to CSS transformations? Not even using html5 in Chrome solved the issue.
They do of course. I created a few examples on my book's website HTML5 Multimedia: Develop and Design under 'chapter 7'.
Here's a video undergoing a 3d rotation (Chrome and Safari only - hover over it).
It's highly unlikely you can transform video due to the complexity and processing overhead it would introduce. Computers like to display video in nice rectangular areas which can be reserved and passed directly to display hardware.
The same applies to plugins like Flash and Java.
In short, even if you could do this it's unlikely the result would be watchable except on very high end PCs.
It's possible that one day WebGL will allow mapping video into 3D spaces using hardware acceleration but I wouldn't hold my breath waiting for a solution.
BTW, if you video is simple enough you might find converting the video to an animated GIF solves the issue.
Related
I've recently been exploring on a site in my free time, and ran across a peculiar circumstance. When viewing an image (direct link) from imageshack, it displays in two (or more) completely different, and sometimes blurry, dimensions.
For instance -- where an image might be small in Chrome or Vivaldi, appears in full scale in Safari or Firefox. Given the differences in the background, as I believe the former two are webkit based, where as the other two use their own engine, I'm not sure if this has something to do with it, as I couldn't detect any outright styling that would force such a difference.
The links are identical when viewed between browsers, on the same machine. Same results occur when attempting on another machine. Any idea as to what might cause this, and how to remedy it for a consistent experience?
Below is a single image link for an example -- one of many instances.
Image
My thanks ahead of time for the input and any feedback or assistance!
I'm looking into using CSS to transform a YouTube video on my site.
I'm aware this is possible as I've began to do so in jsFiddle, but will this slow down page speeds, or what hindrances may occur because of this, if any?
My example using...
transform: scale(0.8) rotate(2deg);
http://jsfiddle.net/Liamatvenn/Vh6C7/
Okay, first the transformations you are doing are 2D not 3D, I've submitted an edit that fixes this in your title.
As for your question, any transformations will obviously slow down the load speed of your page, but 2D transformations are not as intensive as 3D. However, 3D transformations will actually use the GPU(some people will write a non-consequential 3D transform in order to force the GPU to render, resulting in faster speeds) to render, so if you end up doing a lot of tranformations, switch to using 3D transforms.
NEVER use web-filters (blurs, sepia, b/w, contrast, etc) on your videos or embedded content, those will definitely slow down load speed as well as become extremely buggy and glitchy looking. web-filters do not work well with videos.
While your example only has one YouTube video, I'm assuming that you want to put multiple on the same page arranged in a cool way. I would not recommend loading more than 3 or 4, as loading multiple embedded YouTube videos can be way more taxing on your load time than the transformations themselves. I would link to each individual video through a preview image if you are able to.
I'm looking to use CSS gradients for an element of my web app that is drawn repetitively, as it would allow me more flexibility in dynamically changing its appearance. However, my question is whether gradients are more expensive for the browser to render than bitmap images. Or do images use more processing power? (And I'm not concerned with cross-browser compatibility- the app will only be used on the iPad)
According to an article on the Webkit Wiki, images perform better:
Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible.
Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages
Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.
This above answer is directly lifted from How does the performance of using background-gradients in CSS vs using images?
These links can be useful read for you
Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients
CSS gradients are faster than SVG backgrounds
http://leaverou.me/2011/08/css-gradients-are-much-faster-than-svg/
Runtime Performance with CSS3 vs Images
http://jacwright.com/476/runtime-performance-with-css3-vs-images/
Currently, I'm scaling a 118x118 pixel PNG graphic to 19x19 and it looks terrible in IE7.
Just to note, I'm utilizing -ms-interpolation-mode: bicubic;
** Does IE generally not work as intended with PNGs?
Thanks
In general, trying to deliver a 120-ish pixel image and display it to the user at 20-ish pixels is not the best idea. You're going to have high overhead from the loading of the image that you don't really need, plus it's nearly always going to scale at a much lower quality than you could get from a rasterized image (and you're sending vector)
It's also not the best idea to be doing things so proprietary as using Microsoft's "special" functions. Yes, they work. But again, you're sending additional overhead to support one browser that's losing market share by the day. Insist on w3 standard functionality to do your work and everyone will be happier in the long run....especially the person who picks up your legacy code.
If you HAVE to do it this way, make use of an image manipulation library like GD or ImageMagick. Or, more simply, take the time to properly format your image or icon down with Photoshop, Gimp, or the like. For 2-3 minutes' worth of work, you'll have a happier user and be able to move on to more important things.
I've been reading a lot of ways recently of how to avoid having to use Photoshop for things like gradients and shadows on buttons, when you can use CSS3 Box Shadow for such features. Now this is great, but obviously legacy browsers and most IE browsers don't yet implement CSS3 features, so my question is, why save yourself extra work in Photoshop when you can use CSS3 but then HAVE to use Photoshop for other browsers to see the desired effects? Isn't that just extra work?
you can use CSS3 but then HAVE to use Photoshop for other browsers to see the desired effects?
Often you don't really care whether the other browsers see the desired effects. If it's just a subtle background gradient effect, the site's going to work fine and still look reasonable with a flat background in downlevel browsers.
Compatibility was more of a problem when CSS 2 Positioning was at this stage: an unsupported positioning feature could lead to an unusable layout. But for essentially frivolous effects like backgrounds, borders and shadows, it's not critical if the effect goes missing.
There are a few reasons. From a developer/designers perspective, using CSS3 can be more flexible. An image is more or less just a static image. With CSS you can use script or CSS to animate or adjust the styling, and have advanced integration between the various technologies. This allows you to be able to do some things that are not possible or difficult just using images.
The page weight is also lower usually when using CSS, which allows the page to load faster, especially on slow connections or mobile devices. It also reduces HTTP requests (although you can use data uris too) which reduces latency and thus speeds up page loading.
Using CSS is often more maintainable and quicker, as you can adjust say a background colour or a shadow quickly just by changing the CSS, while with images you have to open up photoshop, edit the file, resave, etc. This is fantastic for quick tweaks.
There are also some people (myself included) that are much more comfortable in code than they are using graphics packages. For me it is easier to use CSS, but your milage may vary.
Also from the browser perspective we want to move the web platform forward and increase the capabilities. SVG is an example of another technology that doesn't work across all browser versions yet, but adds a lot of power. Although it may not be possible to deploy sites using certain CSS3 properties or SVG without fallbacks right now (depending on your audience or client) there will be a time in the future when old browsers are dead and what we are adding today works for all users. There was a time when most of CSS2.1 wasn't supported for example, while now you can rely on most of it if you don't need to design for IE6.
There are some parts of CSS3 that you can happily use without fallbacks, if you have a client that doesn't require all browsers to look the same. border-radius is an example, or giving a solid colour fallback to old browsers and applying transparency for newer browsers.
The world is moving forward, you can't ignore it. as long as old browser will show a button and new browser will show a more nice one, you are ok.
Otherwise, we were still be working on VT100... as why using "Windows" if most monitors doesn't support more than 4 color graphics and has 80X22 resolution....
If your bosses accepts the idea of having two versions of looks and feel and a warning. CSS3 is a good idea.
So, you use CSS3 features in your code and forget about the browsers that are not compatible -- they will see the "low-graphics version", you might want to issue a non-intrusive warning (like the one we get as alerts in StackOverflow), saying, "Your browser is not compatible with CSS3. To see this website in high graphics please upgrade your browser. Click the link here to update now."
But, depends on where you work. Big companies with lot of resources may like to stick with Photoshop and smaller once may like a light-weight CSS3 code that degrades silently in non-compatible browser.
Well you can always use ChromeFrame, to impose nice behavior on IE. Assuming that a lot of products will insist for it the near future (yeah we can argue against this), chances are that most IE users will have chromeFrame even before your application would insist for it. Once you take a decision on this, decision on using CSS3 properties or HTML5 elements is - well - hell yeah!!
Marvin