my question is very simple, actually I want to put the iframe element (which can contain video, webpage, image, pdf, etc.) to be displayed on the element,
it doesn't require to be editable, just display is enough
I am not sure whether you want to display it on top of it or draw it onto the canvas. The first is possibly by absolutely positioning the element above the canvas (or below it if you want to draw additional things over it). The second is impossible (except if you are running in a chrome extension or firefox add-on which isn't the case I assume (if it is the case than the function is called DrawElement on the cavnas context)). There have been some projects which attempt to manually make a 'screenshot' of a page ( Can you take a "screenshot" of the page using Canvas? ), but that still wouldn't work with pdf files. Video content in a html5 video tag can similarly be drawn to the canvas manually, although again the controls etc. would have to be drawn manually.
The reason why it's not possible to draw the entire element to the canvas is as a security precaution to prevent developers to get information about external pages (although there have been discussions about allowing this and accepting that the canvas will get 'tainted' meaning nothing can be read from it, but the consensus was that positioning the element below the canvas is far more usefull in that case). If you want to read into these security considerations you should look up Bug 69044 in the webkit engine.
Related
I'm trying to set something up where my background would scale depending on the user's browser width, but I'm tied to a background set in the external stylesheet under a certain element. I can change the background, I can modify its attributes, but I cannot replace it with a html background.
I've been researching solutions for this and most of them don't seem to work. I even tried linking (in the html) an external JS that detects screen resolution and chooses a bg file accordingly, which is exactly what I need, only the browser doesn't detect it at all, whether I nest the script within the html or just link it. So I'm looking for a way to link it under the bg setting in CSS. From what I read, this is "possible but risky", with no real instructions on how it's done.
I'm willing to try it despite the risk, but I'm also open to alternative suggestions. All I need is to be able to set two different image files (same image, just scaled differently) for small phones vs everything else. I've already looked at srcset but that requires embedding in html, so it's no go for me, although I was excited about it. I don't mind actually editing the images myself.
I'm not sure what you mean by link javascript in bg settings in the css.
But you should be able to set different backgrounds using media queries within CSS. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
It sounds as though you're looking for media queries. You can set specific CSS based on media features.
See W3Schools for a description and examples on media queries.
I want to write an extension for Chrome (as seems the easiest option) that would show notifications on top of a full screen video.
For example, say you're watching a Netflix video, the chrome recognises what video you're watching, checks databases for popups, and if it found some, it shows them at specific times (say when video is at 1:05 or something).
While most of the parts seem doable, main question is, how to display some HTML element on top of a video that is in full-screen mode?
Thanks a lot!
Edit
After some research and links provided by the answer, I could not find an answer for Flash players - I guess that is not (easily) possible.
However, as per my example, I tested Netflix videos, and whether it's fullscreen or not, a simple div with absolute positioning and high value for z-index was visible at all times. As many of the systems are now are or moving onto HTML5 video's, the simple solution should apply to all of them.
Thanks Marc Guiselin for helping.
I asked this a while back for my extension: Force a div to show up and overlay whatever is in fullscreen
The result was this: you can't on things like flash, however, I found out you can detect if an html element is in fullscreen in your content script using document.fullscreenElement||document.webkitFullscreenElement.
If it's null, nothing is in full screen, but if isn't, then you can append stuff to it while its in fullscreen.
Also if you want to do this, you might want to allow your content scripts to work within iframes using "all_frames": true in your manifest, since a lot of sites now use embeded iframe html5 players that can go full screen.
Good luck.
I know the browser can detect image sizes early on, by how it reserves the space early in the download and then fills in the area with the image as it loads.
My question is, is there any way I can get a hold of that? Is there some event that fires when the browser has information on the image such as its size?
I've used an onLoad event attached to the image itself in the past. It often fires before the image has been drawn by the browser, but that may not be early enough for your purposes.
I'm using some javascript to make my images draggable
I want to be able to move my images over each other and create a similar effect to the multiply blending mode in photoshop.
I've seen how this is possible with static images, but I want these to change as they are moved around the screen, rather than just loading up with the effect already applied.
Is this possible within the canvas? Is there a better way?
Yes, it is possibile with Canvas and processing.js, but you will not be able to use your actual draggable plugin (it doesn't seem HTML5).
Read this http://processingjs.org/reference/blend_/ but remember Blending on Canvas could be very slow (it depends by images' resolution and by Browser' engine).
I want to create a custom video control, I mean over the video itself, with issues like double click on some x and y coordinates of the video to zoom In, but I can't get this result because the real player plugin API is not that flexible, then I Tried to create a transparent layer to handle those events and I can't achieve that the transparent layer sits on top of the video, I tried this list:
1.- Put a flash transparent movie over the real player plugin- not working the player breaks the z-Index and the video goes to the top.
2.- Put an Iframe transparent over the real player plugin- not working it puts on top, but when I make the Iframe transparent, the movie goes agains to the top.
3.- I tried to use the map html tag, also is not working.
4.-I tried to put and div absolute positioned, but z-index is not working.
I need some help with this topic.
thanks guys
There is no reliable way to force a browser to layer content on top of a plugin, because plugins like Flash just talk to the video/audio system rather directly and just paint in the bounding box the browser tells them to.
Obviously it's still experimental, and there's no IE support (without ChromeFrame), but was designed to solve exactly this problem.
If this was Flash you could use wmode=opaque or wmode=transparent as an alternative to the default wmode=windowed, which is much faster but causes problems with overlays like you describe. I've found no sign of an equivalent option for real player.
http://javafx.com/ would be my recommendation
I would avoid trying to mash several different technologies together to get what you want, It will make for a maintenance nightmare between different browsers and browser upgrades.
I think this is what you search for:
http://www.dynamicdrive.com/forums/showpost.php?s=4cc8a233f39321ad1ee9e01ec57a3bef&p=200817&postcount=10
You need the wmode = opaque to get the layer over the flash.
a place where you can find this working is, www.dtele.de .
If you open the navigation, you´ll see, tha it lays over the flash movie.